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 parten del mismo concepto, pero a diferencia de las transiciones, permiten añadir más estados aún. 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:
animation
(o derivadas) para indicar que elemento HTML vamos a animar.@keyframes
la animación en cuestión y sus estados (fotogramas clave).En primer lugar, vamos a examinar las diferentes propiedades relacionadas con las animaciones, y más adelante veremos como crear fotogramas con la regla @keyframes
.
Para el comportamiento de una animación, necesitamos conocer las siguientes propiedades, que son una «ampliación» de las propiedades de 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 «completa» la animación. | none | forwards | backwards | both |
animation-play-state |
Estado de la animación. | running | paused |
En las siguientes secciones explicaremos detenidamente cada una de estas propiedades y su funcionamiento.
La propiedad principal de las animaciones es animation-name
, ya que esta permite especificar el nombre de la animación (definido con la regla @keyframes
que veremos más adelante) que queremos asociar al elemento HTML donde indicamos la propiedad. El nombre de la animación debería estar en kebab-case
(y no en camelCase
u otras).
animation-duration
establece el tiempo de duración de la animación.animation-delay
establece el retardo en empezar la animación.animation-timing-function
establece el ritmo de la animación.Las propiedades
animation-duration
yanimation-delay
funcionan exactamente igual que las propiedades análogastransition-duration
ytransition-delay
del apartado de Transiciones CSS. De igual forma, la propiedadanimation-timing-function
es idéntica a la propiedadtransition-timing-function
que explicamos en el apartado de Funciones de tiempo.
La propiedad animation-iteration-count
permite indicar el número de veces que se repite la animación, pudiendo establecer un 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 entre los siguientes:
Valor | Significado |
---|---|
normal |
Los fotogramas se reproducen en orden: desde el primero hasta el último. |
reverse |
Los fotogramas se reproducen en orden inverso: desde el final hasta el primero. |
alternate |
En iteraciones par, se reproducen como normal . En impares, como reverse . |
alternate-reverse |
En iteraciones par, se reproducen como reverse . En impares, como normal . |
Por defecto, una animación antes de arrancar y después de terminar (si no está establecida en repetición infinite
) no tiene aplicados los estilos de la animación especificada en cuestión. Esto se puede ver fácilmente, por ejemplo, cuando termina una animación, que vuelve a sus «estilos iniciales».
Mediante la propiedad animation-fill-mode
podemos indicar que debe hacer la animación cuando no se está reproduciendo:
none
realiza el comportamiento indicado en el párrafo anterior.backwards
indica que la animación debe tener aplicados los estilos del fotograma inicial antes de empezar.forwards
indica que la animación debe tener aplicados los estilos del fotograma final al terminar.both
indica que debe aplicar los dos casos anteriores (backwards y forwards).Por último, la propiedad animation-play-state
nos permite establecer la animación a estado de reproducción running
o pausarla mediante el valor paused
. Esto en CSS no da demasiadas posibilidades, pero puede ser muy útil combinado con algo de Javascript.
Nuevamente, CSS ofrece la posibilidad de resumir todas estas propiedades en una sola, para hacer nuestras hojas de estilos más compactas. El orden recomendado para los valores de la propiedad de atajo sería el siguiente:
.animated {
/* animation: <name> <duration> <timing-function> <delay>
<iteration-count> <direction> <fill-mode> <play-state> */
animation:
change-color 5s linear 0.5s 4 normal forwards running;
}
OJO: Mucho cuidado al indicar los segundos en las propiedades animation-duration
y/o animation-delay
. Si no indicamos la unidad (incluso con valores de cero), se interpretará como el valor de la propiedad animation-iteration-count
, que es el número de veces que se repite la animación (y no lleva unidad).
Como en muchas propiedades de CSS, es posible separar por comas para indicar múltiples valores, en este caso, para indicar que queremos realizar varias animaciones a la vez. En este ejemplo, indicamos que tanto la animación move-right
como la animación change-color
deben empezar a la vez, cada una de las cuales dura 5 segundos
y tienen un ritmo lineal (constante):
.animated {
animation:
move-right 5s linear,
change-color 5s linear;
}
Sin embargo, si además añadimos la propiedad animation-delay
, podemos hacer algo muy interesante.
Es posible encadenar animaciones utilizando animaciones múltiples combinadas con la propiedad animation-delay
. Observa el siguiente ejemplo donde se verá mucho mejor:
.animated {
animation:
move-right 5s linear 0s, /* Comienza a los 0s (no hay anterior) */
look-up 2.5s linear 5s, /* Comienza a los 5s (5 de la anterior) */
move-left 5s linear 7.5s, /* Comienza a los 7.5s (5 + 2.5 de la anterior) */
dissapear 2s linear 9.5s; /* Comienza a los 9.5s (5 + 2.5 + 2 de la anterior) */
}
El truco de este ejemplo está en los valores de duración y los de retardo, en combinación con los anteriores:
move-right
comienza a los 0 segundos
y dura 5 segundos
.look-up
comienza a los 5 segundos
y dura 2.5 segundos
.move-left
comienza a los 7.5 segundos
y dura 5 segundos
.dissapear
comienza a los 9.5 segundos
y dura 2 segundos
.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.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev