Conceptos básicos para la animación CSS

  • Por
  • 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.
Estamos continuando con la serie de artículos sobre animaciones CSS, una utilidad que sin duda se convertirá en un gran aliado de los diseñadores para crear webs más impactantes y basadas en estándares web. Hay que decir que, aunque en el momento de escribir estos artículos las animaciones CSS están disponibles tan solo en navegadores basados en Webkit, como Google Chorme, en poco tiempo serán compatibles con todos los navegadores.

Así pues, una vez que sabemos lo que es la animación CSS, podemos pasar a ver los conceptos clave que necesitamos para poder crear una animación.

Nota: Otros conceptos importantes a tener en cuenta que hemos visto en otras entregas de contenido dentro de DesarrolloWeb.com es la programación HTML 5 y la especificación CSS 3.

Conceptos clave que tenemos que conocer bien:

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 seria 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.

Nota: Este código está incompleto todavía, porque sólo es un fragmento del CSS y faltaría la parte del HTML. De momento por ahora está bien, pero aun tenemos que explicar otras cosas sobre las animaciones CSS que debes saber sobre el estado actual de los navegadores y sus particularidades de compatibilidad con esta nueva capacidad de CSS 3. Pero no preocupoarse, porque en breve veremos un códico completo y funcionando, en el siguiente artículo.

Con estos conceptos podemos decir que estamos preparados para que en el siguiente artículo realicemos un ejemplo muy básico de animación dentro de una página web. Recordando siempre que no funciona actualmente en todos los navegadores y que trabajamos con CSS 3 y HTML 5.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir