fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

Animar una imagen con CSS


Para lograr una animación de zoom y desplazamiento en bucle en una imagen sin modificar su tamaño, puedes combinar transformaciones y animaciones en CSS. Aquí tienes un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Animación de Zoom y Desplazamiento</title>
</head>
<body>
  <div class="zoom-image">
    <img src="tu-imagen.jpg" alt="Imagen">
  </div>
</body>
</html>

CSS (styles.css):

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.zoom-image {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.zoom-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: zoomAndPan 8s linear infinite;
}

@keyframes zoomAndPan {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.2) translate(10%, 10%);
  }
}

En este ejemplo, hemos creado una animación llamada zoomAndPan que alterna entre dos estados. En el primer estado (0% y 100%), la imagen no sufre transformaciones y se mantiene en su posición original. En el segundo estado (50%), la imagen se escala un 20% más grande y se desplaza un 10% hacia abajo y hacia la derecha.

La animación tiene una duración total de 8 segundos y se repite en bucle debido al valor infinite en la propiedad animation. Puedes ajustar la duración, el nivel de zoom y el desplazamiento según tus preferencias.

Asegúrate de reemplazar "tu-imagen.jpg" con la ruta de tu imagen real.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla linux local mac node.js pagina pagina web php post problemas producto red servicio servidor solución split sql sql server stock string windows woocommerce wordpress