Cuando ya hemos utilizado propiedades CSS como animation
(o de su familia, animation-*
), nos falta una parte muy importante: definir los fotogramas de la animación.
Una animación esta formada por varios fotogramas, una secuencia de imágenes (30-60 fotogramas por segundo, por ejemplo) que mostradas una detrás de otra generan el efecto de movimiento que conocemos de una animación. En CSS, los fotogramas se crean a partir de propiedades CSS, y no hace falta definir tantos fotogramas. Sólo crearemos fotogramas clave y el resto de fotogramas los generará el navegador.
Para definir esos fotogramas clave, utilizaremos la regla @keyframes
, la cuál es muy sencilla de utilizar. Se basa en el siguiente esquema:
Cada uno de estos time-selector
será un momento clave de cada uno de los fotogramas clave de nuestra animación, y ya veremos que pueden definirse muchos en una misma animación.
Como vemos, dicha sintaxis tiene dos partes interesantes, ya que las reglas (propiedad, valor) ya las conocemos en CSS. Las partes principales por las que debemos comenzar son:
Parte | Descripción |
---|---|
@keyframes |
Regla para darle un nombre y definir los fotogramas clave de una animación. |
from |
Fotograma clave inicial con los estilos CSS a aplicar. Equivalente a 0% . |
to |
Fotograma clave final con los estilos CSS a aplicar. Equivalente a 100% . |
Porcentaje especifíco de la animación con los estilos CSS a aplicar. Permite decimales. |
Esto siempre se ve mejor con un ejemplo, así que vamos a mostrarlo:
@keyframes change-color {
from { background: red; } /* Primer fotograma */
to { background: green; } /* Segundo y último fotograma */
}
Como vemos, hemos nombrado change-color
la animación, que parte de un primer fotograma clave con el fondo rojo hasta un último fotograma clave con fondo verde.
Cuidado con olvidarse de la
s
final de@keyframes
, ya que está en plural. Respecto al nombre de la animación, lo recomendable es utilizar kebab-case a la hora de nombrarla y que represente bien lo que hace.
Recuerda que no basta con definir la animación mediante @keyframes
, también que hay que asociar la animación al elemento o etiqueta HTML al que queremos aplicársela:
.animated {
background: grey;
color: #FFF;
width: 150px;
height: 150px;
animation: change-color 2s ease 0s infinite;
}
La magia de la regla @keyframes
es que nosotros solo declaramos los fotogramas clave, mientras que el navegador irá generando los fotogramas intermedios para conseguir una animación fluida.
Truco: Si una animación va a golpes, es muy posible que te hayas pasado con el tiempo de duración de la misma. Intenta utilizar valores bajos como
0.25s
,0.5s
,1s
y no valores mucho más altos.
Los selectores from
y to
son muy similares a colocar 0%
y 100%
, así que los modificaremos y de esta forma podremos ir añadiendo nuevos fotogramas intermedios. Vamos a añadir un fotograma intermedio e indentando, ahora sí, correctamente el código:
@keyframes change-color {
0% {
background: red; /* Primer fotograma */
}
50% {
background: yellow; /* Segundo fotograma */
width: 400px;
}
100% {
background: green; /* Último fotograma */
}
}
.animated {
background: grey;
color: #FFF;
width: 150px;
height: 150px;
animation: change-color 2s ease 0s infinite;
}
En este caso, la animación va a progresar por tres fotogramas clave, por lo que irá desde el color rojo, al color amarillo, para finalizar en el color verde. Esta animación funcionará durante 2 segundos y se realizará una sola vez (por defecto las animaciones solo se realizan una vez, salvo que le indiques infinite
o el número deseado).
Truco: Si tienes fotogramas que van a utilizar los mismos estilos que uno anterior, siempre puedes separarlos con comas, por ejemplo:
0%, 75% { ... }
, que utilizarían dichos estilos al inicio de la animación y al 75% de la misma.
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