Volver Atras

Compilado de Instrucciones CSS de Animación: Animation y @keyframes

Animation y @keyframes

Esta propiedad de Estilo se usa para ejecutar una función definida como @keyframes{}.

@keyframes{}

Sirve para definir los frames con los cambios que una animación debe realizar durante un ciclo de tiempo. El momento del frame en el ciclo convenientemente se especifica con %. Por ejemplo:

@keyframes rebote { 0 %{top: 0px;}
25 %{top: 200px;}
50 %{top: 100px;}
75 %{top: 200px;}
100 %{top: 0px;}}


Mas sobre Animaciones...

animation nombre duracion cronología demora iteraciones

Los valores son opcionales:
  • nombre el nombre del @keyframes{} a ejecutar.
  • duracion el tiempo que debe ejecutar el @keyframes{}. (Ej 2s, 500ms)
  • cronología
    • linear: el tiempo transcurre normalmente sin aceleraciones.
    • ease: inicia lento, luego acelera y luego termina lento. Este es el default si no se especifica.
    • ease-in: inicia lento y luego acelera.
    • ease-out: arranca y termina lento.
  • demora el tiempo que debe esperar para iniciar la ejecución del @keyframes{}. (Ej 2s, 500ms)
  • iteraciones la cantidad de veces que debe ejecutar el @keyframes{}.
  • direccion
    • normal: el tiempo transcurre de 0% a 100%. Este es el default si no se especifica.
    • reverse: el tiempo transcurre de 100% a 0%.
    • alternate: el tiempo transcurre de 0% a 100% y luego de 100% a 0%.
    • alternate-reverse: el tiempo transcurre de 100% a 0% y luego de 0% a 100%.