Cómo hacer Animaciones usando CSS3 transitions

Aprende a hacer animaciones en CSS con transiciones

En este tutorial aprenderemos a crear animaciones sencillas utilizando las propiedades de transición de CSS3. Estas propiedades nos permiten aplicar efectos de transición suaves, como el aumento de tamaño de una imagen, a nuestros elementos HTML.

Si quieres seguir aprendiendo más sobre CSS y HTML cuando termines este tutorial, te recomendamos que consultes nuestro curso de HTML5 y CSS3.

Paso 1. Preparación del documento HTML

Comencemos preparando el documento HTML en el que trabajaremos. Crearemos un contenedor que contendrá una lista de elementos a los que aplicaremos los efectos de transición.

1<div class="wrap">    
2  <ul>        
3    <li class="juego">            
4      <img src="img/juego01.jpeg" title="Animaciones usando CSS3 transitions" alt="Animaciones usando CSS3 transitions">            
5      <h2>Carcassonne</h2>            
6      <p>Los Cátaros</p>        
7    </li>        
8    <li class="juego">            
9      <img src="img/juego02.jpeg" title="Animaciones usando CSS3 transitions" alt="Animaciones usando CSS3 transitions">            
10      <h2>Caylus</h2>            
11      <p>Felipe IV de Francia</p>        
12    </li>        
13    <li class="juego">            
14      <img src="img/juego03.jpeg" title="Animaciones usando CSS3 transitions" alt="Animaciones usando CSS3 transitions">            
15      <h2>Catan</h2>            
16      <p>La Gran Caravana</p>        
17    </li>    
18  </ul>
19</div>
20<!-- .wrap -->

Esto es solo un ejemplo básico del marcado HTML que utilizaremos para este tutorial. Puedes adaptar el contenido y la estructura a tus propias necesidades.

Paso 2. Aplicación de la regla de transición

Ahora vamos a aplicar la regla de transición a cada elemento de la lista con la clase .juego. Dado que las propiedades de transición aún no están completamente estandarizadas, debemos incluir los prefijos correspondientes a los diferentes motores de render de navegadores (-webkit, -moz, -ms, -o) en nuestra hoja de estilos.

1.juego {    
2  width:200px;    
3  padding:2em 1em 1em 1em;    
4  text-align: center;    
5  -webkit-transition: all 300ms ease-out;    
6  -moz-transition: all 300ms ease-out;    
7  -ms-transition: all 300ms ease-out;    
8  -o-transition: all 300ms ease-out;    
9  transition: all 300ms ease-out;
10}

Aquí estamos utilizando el shorthand transition para aplicar la regla de transición a todos los elementos animables dentro de los elementos con la clase .juego. La duración de la transición se establece en 300 milisegundos y el efecto de transición se define como ease-out, lo que significa que la animación será más lenta al principio y más rápida al final.

Paso 3. Estilización de las imágenes

Ahora vamos a darle estilos a las imágenes de los juegos. Reduciremos el tamaño de las imágenes al 90% utilizando la propiedad transform y la función scale.

1.juego img {    
2  margin:auto;    
3  display:block;    
4  -webkit-transform: scale(.9);    
5  -moz-transform: scale(.9);    
6  -ms-transform: scale(.9);    
7  -o-transform: scale(.9));    
8  transform: scale(.9);    
9  -webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
10  -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
11  -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
12  -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);    
13  transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
14  /* easeOutQuad */
15}

Aquí hemos establecido la escala de las imágenes en 0.9 utilizando las propiedades transform y scale. También hemos aplicado una transición de 400 milisegundos utilizando la función cubic-bezier para definir una curva de transición personalizada. En este caso, hemos utilizado la curva easeOutQuad para lograr una animación suave.

Paso 4. Estado :hover y animaciones adicionales

Ahora vamos a añadir estilos adicionales al estado :hover de nuestros elementos de lista, lo que nos permitirá crear animaciones más interesantes cuando el usuario interactúe con ellos.

1.juego:hover {    
2  background-color:white;    
3  background-color: rgba(200,200,200,.3);    
4  -webkit-border-radius: 10px;    
5  border-radius: 10px;    
6  cursor: pointer;
7}
8
9.juego:hover img {    
10  -moz-transform: scale(1);    
11  -webkit-transform: scale(1);    
12  -o-transform: scale(1));    
13  -ms-transform: scale(1);    
14  transform: scale(1);
15}
16
17.juego:hover h2 {    
18  color:#c9a833;
19}

Aquí hemos aplicado estilos adicionales al estado :hover de los elementos de lista y de las imágenes contenidas en ellos. Al hacer hover sobre un elemento, el fondo se vuelve blanco con una ligera transparencia, se agrega un borde redondeado y el cursor se cambia a pointer. Además, la imagen vuelve a su tamaño original (escala 1) con una transición suave, y el color del encabezado (h2) se cambia a un tono dorado (#c9a833).

Cómo modificar la duración de la transición en CSS

La duración de la transición determina el tiempo que tardará en completarse la animación. Puedes personalizar esta duración según tus necesidades. Para ello, puedes modificar el valor en milisegundos de la propiedad transition-duration en tus selectores CSS.

1.juego {
2  /* ... */
3  transition-duration: 500ms; /* Duración de la transición = 500 milisegundos */
4}

Experimenta con diferentes valores de duración para obtener efectos más rápidos o más lentos. Por ejemplo, una duración más corta como 200ms hará que la transición se complete más rápidamente, mientras que una duración más larga como 1000ms la ralentizará.

Uso de diferentes propiedades de transición

Además de la propiedad transition, CSS ofrece otras propiedades relacionadas que puedes utilizar para personalizar aún más tus animaciones. Aquí hay algunas de ellas:

• transition-property: Esta propiedad permite especificar las propiedades CSS que deseas animar. Puedes animar propiedades como width, height, color, opacity, entre otras. Por ejemplo:

1   .juego {
2   /* ... */
3   transition-property: width, height; /* Animar solo las propiedades width y height */
4   }

</code> </pre>

• transition-delay: Esta propiedad establece un retraso antes de que comience la transición. Puedes utilizar valores en milisegundos o en segundos. Por ejemplo:

  .juego {
  /* ... */
  transition-delay: 200ms; /* Retraso de 200 milisegundos antes de que comience la transición */
  } 

• transition-timing-function: Esta propiedad define la curva de aceleración de la transición. Puedes utilizar funciones predefinidas como ease, linear, ease-in, ease-out, ease-in-out, o utilizar funciones personalizadas utilizando la sintaxis cubic-bezier(). Por ejemplo:
  .juego { /* ... */ transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Curva de aceleración personalizada */ }

Experimenta con estas propiedades para crear animaciones más complejas y controladas.

Cómo crear animaciones en bucle con CSS

Además de las transiciones, CSS también ofrece la posibilidad de crear animaciones en bucle utilizando la propiedad animation. A diferencia de las transiciones, las animaciones permiten definir múltiples estados intermedios mediante la utilización de keyframes.

Para crear una animación en bucle, necesitarás definir una regla @keyframes que especifique los diferentes estados de la animación. Luego, puedes aplicar esa animación a un elemento utilizando la propiedad animation-name y especificando la duración y otros parámetros opcionales.

Aquí tienes un ejemplo básico de cómo crear una animación que haga que un elemento se desplace de izquierda a derecha en un bucle:

1@keyframes desplazamiento {
2  0% {
3    transform: translateX(0);
4  }
5  50% {
6    transform: translateX(200px);
7  }
8  100% {
9    transform: translateX(0);
10  }
11}
12
13.juego {
14
15
16  /* ... */
17  animation-name: desplazamiento;
18  animation-duration: 3s;
19  animation-timing-function: linear;
20  animation-iteration-count: infinite; /* Repetir la animación infinitamente */
21}

En este ejemplo, el elemento se desplazará de su posición original a 200px hacia la derecha al 50% de la animación, y luego volverá a su posición original al 100%. La animación se repetirá infinitamente debido a animation-iteration-count: infinite;.

Puedes experimentar con diferentes propiedades y keyframes para crear animaciones más complejas y personalizadas.

¡Domina las animaciones en CSS y da vida a tus diseños web!

¡Y eso es todo! Has aprendido a crear animaciones sencillas utilizando transiciones en CSS3. Siéntete libre de experimentar con diferentes propiedades y valores para crear tus propias animaciones personalizadas.

Recuerda que las propiedades de transición aún están en proceso de estandarización, por lo que es posible que debas agregar prefijos de navegador adicionales en tu hoja de estilos para garantizar la compatibilidad con diferentes navegadores.

Con este tutorial te has iniciado al mundo de las animaciones en CSS, pero si quieres seguir formándote, consulta nuestro curso de HTML5 y CSS3 online o presencial, completamente a tu medida.

¡Diviértete animando tus elementos HTML con CSS3!