Animaciones CSS

Propiedades para crear animaciones en CSS

Una vez conocemos las transiciones CSS, es muy fácil adaptarnos al concepto de animaciones CSS, el cual amplia lo que ya sabemos de transiciones, convirtiéndolo en algo mucho más flexible y potente, en el que no es necesario que el usuario interactue de alguna forma (cómo pasa en las transiciones).

Las transiciones son una manera de suavizar un cambio de un estado inicial a un estado final. La idea de las animaciones CSS parte del mismo concepto, permitiendo añadir más estados. Así pues, con las animaciones podemos partir desde un estado inicial, a un estado posterior, a otro estado posterior, y así sucesivamente.

Para crear animaciones CSS es necesario realizar 2 pasos:

  • Utilizar la propiedad animation (o derivadas) para indicar que elemento HTML vamos a animar.
  • Definir mediante la regla @keyframes la animación en cuestión y su comportamiento.

Centrémonos en la primera, y más adelante veremos como crear fotogramas con @keyframes.

Propiedades de animación CSS

Para definir dicho comportamiento necesitamos conocer las siguientes propiedades, que son una «ampliación» de las propiedades correspondiente a las transiciones CSS:

Propiedades Descripción Valor
animation-name Nombre de la animación a aplicar. none | nombre
animation-duration Duración de la animación. 0 |
animation-timing-function Ritmo de la animación. Ver funciones de tiempo
animation-delay Retardo en iniciar la animación. 0 |
animation-iteration-count Número de veces que se repetirá. 1 | infinite |
animation-direction Dirección de la animación. normal | reverse | alternate | alternate-reverse
animation-fill-mode Como se quedará la animación al terminar. none | forwards | backwards | both
animation-play-state Estado de la animación. running | paused

La propiedad animation-name permite especificar el nombre del fotograma (definido con la regla @keyframes que veremos más adelante) a utilizar. Por otro lado, las propiedades animation-duration, animation-timing-function y animation-delay funcionan exactamente igual que en el tema anterior de transiciones.

La propiedad animation-iteration-count permite indicar el número de veces que se repite la animación, pudiendo establecer un número concreto de repeticiones o indicando infinite para que se repita continuamente. Por otra parte, especificando un valor en animation-direction conseguiremos indicar el orden en el que se reproducirán los fotogramas, pudiendo escoger un valor de los siguientes:

Valor Significado
normal Los fotogramas se reproducen desde el principio al final.
reverse Los fotogramas se reproducen desde el final al principio.
alternate En iteraciones par, de forma normal. Impares, a la inversa.
alternate-reverse En iteraciones impares, de forma normal. Pares, normal.

Por defecto, cuando se termina una animación que se ha indicado que se reproduzca sólo una vez, la animación vuelve a su estado inicial (primer fotograma). Mediante la propiedad animation-fill-mode podemos indicar que debe mostrar la animación cuando ha finalizado y ya no se está reproduciendo; si mostrar el estado inicial (backwards), el estado final (forwards) o una combinación de ambas (both).

Por último, la propiedad animation-play-state nos permite establecer la animación a estado de reproducción (running) o pausarla (paused), algo que puede ser muy útil combinado con clases y algo de Javascript.

Atajo: Animaciones

Nuevamente, CSS ofrece la posibilidad de resumir todas estas propiedades en una sola, para hacer nuestras hojas de estilos más específicas. El orden recomendado para los valores de la propiedad de atajo sería el siguiente:

div {
  /* animation: <name> <duration> <timing-function> <delay>
                <iteration-count> <direction> <fill-mode> <play-state> */
  animation: change-color 5s linear 0.5s 4 normal forwards running;
}

Consejo: Mucho cuidado al indicar los segundos en las propiedades de duración o delay. Si no indicamos la unidad, se interpretará como el valor de la propiedad animation-iteration-count, que es el número de veces que se repite la animación.

Encadenar animaciones

Es posible encadenar múltiples animaciones, separando con comas las animaciones individuales y estableciendo un tiempo de tardo a cada animación posterior:

.animated {
  animation:
    move-right 5s linear 0s,   /* Comienza a los 0s */
    look-up 2.5s linear 5s,    /* Comienza a los 5s */
    move-left 5s linear 7.5s,  /* Comienza a los 7.5s (5 + 2.5) */
    dissapear 2s linear 9.5s;  /* Comienza a los 9.5s (5 + 2.5 + 2) */
}

En este caso, lo que hemos hecho es aplicar varias animaciones a la vez, pero estableciendo un retardo (cuarto parámetro) que es la suma de la duración de las animaciones anteriores. De esta forma, encadenamos una animación con otra.

DigitalOcean
Tabla de contenidos