Conceptos básicos para la animación CSS

Seguimos con el tema de las animaciones CSS y repasamos los conceptos y propiedades más básicas para poder crear una animación simple con CSS 3.

Fotograma clave

Los fotogramas claves son valores iniciales y finales que debe tener la animación CSS. Estas localizaciones, en teoría, las sabemos a ciencia cierta, es decir, siempre conocemos en que punto vamos a empezar y en cual vamos a terminar la animación, así como su duración. Pero podemos crear otros fotogramas clave, no solamente los de inicio y fin, que correspondan con puntos intermedios del movimiento. Las reglas que determinan estos valores es lo que llamamos fotogramas clave dentro de CSS.

Su sintaxis sería algo parecido a esto:

@keyframes ‘nombre_fotograma_clave’ {

   0% {
      left: 100px;
   }
   
   40% {
      left: 150px;
   }
   
   60% {
      left: 75px;
   }
   
   100% {
      left: 100px;
   }

}

Esta animación estaría compuesta de 4 fotogramas clave, el porcentaje es en el momento de la animación en el que va a producirse ese fotograma y los px son la longitud y la alineación donde se colocaría el fotograma dentro del DIV en que se encaje.

El código de dicho DIV sería el siguiente:

DIV {
   animation-name: ‘nombre-fotograma-clave’;
   animation-duration: 45s;
   animation-iteration-count: 10;
}

Los atributos de estilo para esta capa que se ven en el código anterior son los siguientes:

• animation-name: el nombre del fotograma clave.
• animation-duration: la duración de la animación.
• animation-iteration-count: la veces que se repite.

Propiedades sobre la animación aplicables en el DIV

Además de las propiedades que hemos citado en el párrafo anterior, tenemos otra serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV.

Esta sería una lista de las propiedades adicionales, aplicables para definir las animaciones que especificamos en el DIV:

• animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animación y describe como progresa la animación a lo largo de un ciclo.
• animation-direction: esta propiedad define el sentido de la animación. Si especificamos “alternate” y los ciclos de iteraccion son impares, la animación irá en la dirección normal, si no, se realizará en la dirección inversa
• animation-delay: propiedad que nos indica el momento en el que comenzará la animación. Si el valor es 0 se ejecuta en cuanta se carga la página.
• animation: esta propiedad combina las anteriores de una forma resumida.

Código completo para una animación CSS

A continuación veremos un código CSS donde estamos definiendo una animación, aunque todavía hay algunas cosas que tenemos que contaros antes de hacer nuestra primera página de prueba. Pero de momento aquí tenéis un ejemplo utilizando el fotograma clave y las propiedades de una animación:

DIV {
   animation-name: ‘movimiento-diagonal’;
   animation-duration: 5s;
   animation-iteration-count: 10;
}

@keyframes ‘movimiento-diagonal’ {
   from {
      left: 0;
      top: 0;
   }
   
   to {
      left: 100px;
      top: 100px;
   }
}

Este ejemplo lo que nos mostraría seria una animación en la que se mueve un elemento de la esquina inferior izquierda a la esquina superior derecha, ese movimiento va a tardar 5 segundos y se va a repetir 10 veces.

Animación de un texto con CSS 3

Realizamos un ejemplo básico de animación CSS 3 sobre una capa con un simple texto. Veremos cómo hacer funcionar este primer ejemplo de animación CSS en navegadores basados en Webkit.

En este artículo vamos a realizar nuestro primer ejemplo de animación CSS. Veremos que todo es bastante sencillo y que con unas pocas líneas de código CSS se pueden hacer cosas bastante interesantes. Por lo menos, para los que hayan estudiado un poco sobre la animación realizada con otras tecnologías como Javascript, quedará claro que las animaciones CSS son mucho más fáciles y rápidas de producir.

Lo primero que tenemos que hacer es crearnos nuestros fotogramas clave, para ello utilizamos el siguiente código en nuestra hoja de estilos.

@-webkit-keyframes movimiento-diagonal {
   from {
      left: 0px;
   }
   
   to {
      left: 100px;
   }
}

Como ya se comentó anteriormente, lo que se ha definido en el código anterior es un par de fotogramas clave, que corresponden con el inicio y el fin de la animación. En la práctica ésto hace que se nos mueva nuestro texto, de izquierda a derecha de 0px a 100 px.

Una vez que tenemos este primer paso, vamos a darle las propiedades necesarias a la capa DIV, para terminar de definir nuestra animación:

#anim {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative; 
   padding: 2px;
}

En la primera linea le damos el nombre a la animación, que tiene que ser el mismo que el del fotograma clave.

En la segunda le damos una duración de 3 segundos, es decir, la animación tardará en hacer el recorrido sólo 3 segundos.

En la tercera le decimos que lo repita infinitas veces.

La propiedad -webkit-animation-direction: alternate hace que el texto, una vez que haga el recorrido, vuelva a su posición inicial realizando el camino inverso.

Y por último le damos un ancho, y color de fondo y de texto, así como una posición relativa, ya que de lo contrario no funcionaria nuestra animación.

Con esto nuestro código CSS estaría completo, ahora sólo nos quedaría el código HTML que sería tan simple como esto:

<html>
<head>
   <title>Animacion CSS 3</title>
   <link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

   <div id=”anim”>Esto es una animación</div> 

</body>
</html>

Código completo de este ejemplo a continuación:

animacion-css.css

@-webkit-keyframes movimiento-diagonal {
   from {
      left: 0px;
   }
   
   to {
      left: 100px;
   }
}   

#anim {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative; 
   padding: 2px;
}

animacion-css.html

<html>
<head>
   <title>Animacion CSS 3</title>
   <link rel=”stylesheet” href=”animacion-css.css” type=”text/css”>
</head>
<body>

   <div id=”anim”>Esto es una animación</div> 

</body>
</html>

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros