Animaciones con CSS3 y HTML5

La mejor forma de entender las animaciones en HTML y CSS es a través de un ejemplo. Esta forma de aprendizaje nos dará una visión global de las posibilidades de animar nuestras páginas con HTML5 y CSS3. Animar un elemento no es más que dar movimiento y cambiar sus cualidades fisicamente observables pero en este caso con la particularidad de no tener que emplear un lenguaje de programación adicional como puede ser JavaScript u otro framework.

Se estudia a través de la propiedad ‘animation’ reconocida por los navegadores que son utilizado hoy en día. Para poder fijar los puntos dentro de la animación se usa la regla @keyframes que, a través de porcentajes, va indicando el progreso del avance de la animación.

Observe este ejemplo:

<!DOCTYPE html> 
<html lang="es"> 
<head> <metacharset="UTF-8"> 
<metaname="viewport"content="width=device-width, initial-scale=1.0"> 
<title>Animaciones - Altruistas CSS</title> 
<style>
   #contenedor {
      border: 2px solid black;
      margin:auto;
      width: 520px;
      padding: 20px;
   }
   #contenedor h2{
      text-align: center
   }
   #caja-1{
      background-color: red;
      position: relative;
      width: 100px;
      height: 100px;
      left: 400px;
      animation: cajaRoja 2s 3;
    }
    #caja-2{
       background-color: greenyellow;
       position: relative;
       width: 100px;
       height: 100px;
       left: 0px;
       animation: cajaVerdeamarillo 2s 3;
    }
 /* Parámetros para la animación */
        @keyframes cajaRoja {
            0% {left: 400px;}
            50% {left: 10px;}
            100% {left: 400px}
        }
        @keyframes cajaVerdeamarillo {
            0% {left: 10px;}
            50% {left: 400px;}
            100% {left: 10px;}
        }
    </style>
</head>
<body>
    <div id="contenedor">
        <h2>Animaciones - Altruistas CSS3</h2>
        <div id="caja-1">Caja-1</div>
        <div id="caja-2">Caja-2</div>
    </div>
</body>
</html>

Esta animación puede ejecutarse y visualizarse en el siguiente enlace.

Comentario

Se han creado dos cajas exactamente iguales con diferente color y diferente ubicación inicial. De la misma forma, cada una de ellas dispone de una palabra clave donde se establecen 3 puntos de control en el total del recorrido de la animación.

Dentro de las reglas CSS de cada caja indicamos con ‘animation’ tres valores fundamentales que son:

la identificación de la animación.
el tiempo que debe tener hasta llegar al 100% del tiempo.
las veces que tiene que repetirse.

Para este ejemplo el tiempo total es de 2 segundos y se repite 3 veces (‘infinite’ hace indefinido el número de repetición). Dentro de la clave @keyframes es donde indicamos la propiedad y el valor para el porcentaje de tiempo total.

Para la caja roja:

t= 0 segundos la propiedad left = 400 píxeles.
t=1 segundo (50%) left= 10 píxeles.
t=2 segundos (100%) left 400 píxeles.

Para la caja verde:

t= 0 segundos la propiedad left = 10 píxeles.
t=1 segundo (50%) left= 400 píxeles.
t=2 segundos (100%) left 10 píxeles.

A tener en cuenta

Las propiedades dentro de @keyframes van en notación caseCamel. Esto quiere decir que si la propiedad en CSS consta de dos palabras, como por ejemplo font-size, la nueva notación se convierte en fontSize. Es decir, pierde el guión y se une a la primera palabra comenzando por mayúscula.