Animaciones basadas en keyframes con la propiedad animation

En la unidad anterior vimos cómo hacer transiciones CSS3 sobre los elementos de nuestra página web. De esta forma conseguimos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS.

6. Animaciones con propiedad animation

En este apartado veremos cómo encadenar diferentes animaciones utilizando la propiedad animation y sus subpropiedades. Para ello, definiremos la propiedad animation sobre nuestros selectores y después definiremos nuestra secuencia de animación mediante @keyframes.

6.1. Propiedad animation

Para crear una animación primero añadiremos al selector la propiedad animation y utilizaremos sus subpropiedades para configurar la duración o dirección, entre otras cosas. La sintaxis es la siguiente:

selector{
      animation-name: identifier;
      subproperty: value;
}

Las subpropiedades de animation son:

• animation-nameEspecifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
• animation-delayTiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
• animation-directionIndica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
• animation-durationIndica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
• animation-iteration-countEl número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
• animation-play-statePermite pausar y reanudar la secuencia de la animación.
• animation-timing-functionIndica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
• animation-fill-modeEspecifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

6.2. Uso de @keyframes

Una vez añadida la propiedad animation a nuestro selector, haremos uso de los @keyframes para crear animaciones completas.

Los @keyframes son un conjunto de fotogramas clave que describen cómo se muestra cada elemento animado durante la secuencia de la animación. La sintaxis es la siguiente:

@keyframes identifier {
  from {
      ...
  }
  percentage {
      ...
  }
  to {
      ...
  }
}

• identifier Nombre que identifica la lista de keyframe. Debe coincidir con animation-name.
• fromDesde (por ejemplo: desde 0%).
• toHasta (por ejemplo hasta 100%).
• percentage Porcentaje intermedio de las veces que va a ocurrir una animación.

6.3. Ejemplos animaciones

Veamos mejor estos valores mediante varios ejemplos.

6.3.1. Rotación de forma indefinida

Vamos a hacer una animación mediante @keyframes de nuestro logo, de forma que se encuentre rotando de forma indefinida. Para ello vamos a utilizar la propiedad transform y le daremos varios valores a su rotación: crearemos una animación con tres keyframes: uno inicial que tendrá rotación de 0 grados, otro en el 50% que tendrá una rotación sobre el eje y de 180 grados y uno final que volverá a tener una rotación de 0 grados.

Código html:

<img class="animacionLogo" src="eniun.png">

Código CSS:

.animacionLogo {
     animation-duration: 5s;
     animation-name: animLogo;
     animation-iteration-count: infinite;
   }
 @keyframes animLogo{
     from {
         -webkit-transform: rotate(0deg);
         transform: rotateY(0deg);
     }
     50%{
         -webkit-transform: rotate(180deg);
         transform: rotateY(180deg);
     } to {
         -webkit-transform: rotate(360deg);
         transform: rotateY(360deg);
         }
 }

Ejemplo completo en CodePen:

0

6.3.2. Deslizar un texto por el navegador

Ahora haremos una animación de un párrafo que se deslizará por el navegador desde el borde derecho de la ventana:

Código CSS:

p {
   animation-duration: 4s;
   animation-name: animTexto;
   margin: 20px;
 }
 @keyframes animTexto {
   from {
     margin-left: 100%;
     width: 100%;
   }
   to {
     margin-left: 0%;
     width: 100%;
   }
 }

Ejemplo completo en CodePen:

.dark

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 6

Configura diferentes animaciones en alguno de los elementos de tu proyecto web. Por ejemplo, podrías hacer que alguno de los textos e imágenes se muevan desde la derecha de la pantalla del navegador hasta su posición base cuando se recarga la pantalla. También podrías hacer que algún elemento modifique su tamaño y su posición durante un determinado tiempo, etc.