genera un movimiento.
Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:
Es muy fácil crear animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien programadas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras para conseguir que la animación se vea tan suave como sea posible.
Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
En las animaciones utilizamos la regla @keyframes, la animación cambiará gradualmente desde el estilo actual al nuevo estilo en determinados momentos, es decir, un keyframe son los puntos claves de la animacion:
Su sintaxis es:
@keyframes <nombre_animacion> {
[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}
Ejemplo:
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
Subpropiedades
animation-name: Declara el nombre de la @keyframesregla a manipular.
animation-duration: La cantidad de tiempo que le toma a una animación para completar un ciclo.
animation-timing-function: Establece curvas de aceleración predefinidas, tales como easeo linear.
animation-delay: El tiempo entre el elemento que se está cargando y el inicio de la secuencia de animación.
animation-direction: Establece la dirección de la animación después de que el ciclo. Sus restablece predeterminados en cada ciclo.
animation-iteration-count: El número de veces que la animación se debe realizar.
animation-fill-mode: Conjuntos que valores se aplican antes / después de la animación.
Por ejemplo, se puede establecer el estado final de la animación a permanecer en la pantalla, o puede configurarlo para volver a antes, cuando comenzó la animación.
animation-play-state: Pausa / reproducir la animación.
Veamoslo con un ejemplo para entenderlo mejor:
Ver código del ejemplo
