Lección 22: Animation
A continuación puedes observar una animación básica con los estilos mínimos para que funcione.
/* Definición de la animación */
@keyframes animacion-rotacion {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
.cuadrado {
width: 10rem;
height: 10rem;
background: orange;
/* Declaración de la animación */
animation-name: animacion-rotacion;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Siempre debe estar compuesto por keyframes (definición de la animación) y sus estilos (configuración).
@keyframes
Nos permite definir los pasos de una animación donde indicamos cada paso con un porcentaje respecto a la duración final.
@keyframes [nombre] {
[paso inicial] {
}
[paso final] {
}
}
La estructura más sencilla es usando el alias from (0%) y to (100%).
@keyframes animacion-transicion-color {
from {
color: red;
}
to {
color: yellow;
}
}
Qué es equivalente a:
@keyframes animacion-transicion-color {
0% {
color: red;
}
100% {
color: yellow;
}
}
Si queremos agregar más pasos solo hay que añadir más elementos.
@keyframes animacion-caida-pelota {
0% {
top: 0;
}
50% {
top: 100px;
}
100% {
transform: scaleY(0.5);
}
}
@keyframes animacion-vibracion {
0% {
top: 0;
}
5% {
top: -100px;
}
10% {
top: 100px;
}
100% {
top: 0;
}
}
animation-name
Nombre del keyframe a asociar con el elemento.
.elemento {
animation-name: animacion-rotacion;
}
animation-duration
Tiempo que durará la animación.
.elemento {
animation-duration: 2s;
}
animation-timing-function
Función que define la curva de la animación.
.elemento {
/* Por defecto */
animation-timing-function: ease;
/* Otras funciones prestablecidas */
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
/* A medida */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
animation-delay
Retardo en empezar.
.elemento {
animation-delay: 1s;
}
animation-iteration-count
Cantidad de ocasiones que se repetirá.
.elemento {
animation-iteration-count: 1;
animation-iteration-count: infinite;
}
animation-direction
Dirección en que se ejecutará la animación: normal, inversa o alternando.
.elemento {
/* Por defecto, se reproduce en una dirección */
animation-direction: normal;
/* Se reproduce en dirección inversa */
animation-direction: reverse;
/* Se reproduce en dirección normal y se reproduce de nuevo en dirección inversa */
animation-direction: alternate;
/* Se reproduce en dirección inversa y se reproduce de nuevo en dirección normal */
animation-direction: alternate-reverse;
}
animation-fill-mode
Podemos controlar que estilos permanecen una vez acabada la animación.
.elemento {
/* Por defecto, los estilos vuelven a estado previo a la animación */
animation-fill-mode: none;
/* Al terminal la animación mantiene los estilos finales */
animation-fill-mode: forwards;
}
animation-play-state
Podemos indicar si la animación debe reproducirse o pausarse
.elemento {
/* Reproducirse */
animation-play-state: running;
/* Pausarse */
animation-play-state: paused;
}
Animación frame a frame
Ya somos capaces de montar animaciones simples a partir de estilos CSS que van cambiando a lo largo de una línea de tiempo. Pero, ¿como puedo escapar de las limitaciones de los estilos? ¿Cual es la técnica para crear cualquier tipo de movimiento? Como siempre se han realizado las animaciones: cuadro a cuadro o frame a frame.
Por ejemplo, el siguiente personaje caminando no es posible realizarlo con formas simples de CSS. En cambio tus ojos están contemplando una animación real en HTML.
Para lograrlo debes partir con una imagen donde se ha dibujado cada uno de los fotogramas.
En cuando lo has construido, es rápido aplicarlo. Se añade como una imagen de fondo que se irá trasladando.
@keyframes caminado {
from {
background-position: 0 0;
}
to {
background-position: -1000px 0;
}
}
.personaje {
width: 125px;
height: 168px;
background-image: url(sprite-sheet.png);
animation: caminado 1s infinite;
}
<div class="personaje"></div>
Ya solo nos queda indicar que la transición no sea fluida, se represente con saltos o steps. Uno por cada frame, en el ejemplo serían 8.
@keyframes caminado {
from {
background-position: 0 0;
}
to {
background-position: -1000px 0;
}
}
.personaje {
width: 125px;
height: 168px;
background-image: url(sprite-sheet.png);
animation: caminado 1s infinite steps(8);
}
Accesibilidad
Las animaciones pueden ser un problema para las personas con discapacidad. Por ello, es importante que se reproduzcan a no ser que el usuario diga lo contrario. En CSS disponemos del media prefers-reduced-motion.
@media (prefers-reduced-motion: no-preference) {
/* Aquí irán TODAS las animaciones */
}
Puedes automatizar el proceso con un mixin de SASS.
Herramientas avanzadas
Un buen recopilatorio, fácil de utilizar, son las recogidas en Animation.css. Sin embargo una de las herramientas más completas en el sector es Greensock, aunque requiere conocimientos en JavaScript.
Actividad 1
Crea un circulo, representando al Sol, que se sitúe en mitad de la página. A continuación crea otro circulo que represente una luna con la animación para realizar un eclipse, o tape por completo, durante unos instantes.
Actividad 2
A partir de imágenes o formas simples, crea una noria que rote lentamente.
Actividad 3
Transcurrido unos segundos muestra, con una elegante animación (fundido o desplazamiento), un cartel de cookies.
Actividad 4
Crea un reloj animado donde funcionen sus agujas.
Pista: Puedes apoyarte con transform-origin.
Actividad 5
Busca referencias de loadings (cargando...) animados y crea el tuyo propio.
Actividad 6
Crea una animación de un péndulo.
Pista: Necesitarás transform-origin.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios