CSS Animaciones con fotogramas clave


Ejemplo

Para animaciones CSS de varias etapas, puede crear CSS @keyframes . Los fotogramas clave le permiten definir múltiples puntos de animación, llamados fotogramas clave, para definir animaciones más complejas.


Ejemplo básico

En este ejemplo, haremos una animación de fondo básica que alterna entre todos los colores.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Ver resultado

Hay algunas cosas diferentes a tener en cuenta aquí. Primero, la sintaxis real de @keyframes .

@keyframes rainbow-background{

Esto establece el nombre de la animación a rainbow-background .

0%     { background-color: #ff0000; }

Esta es la definición de un fotograma clave dentro de la animación. La primera parte, el 0% en el caso, define dónde está el fotograma clave durante la animación. El 0% implica que es el 0% del tiempo total de animación desde el principio.

La animación hará una transición automática entre los fotogramas clave. Por lo tanto, al establecer el siguiente color de fondo en 8.333% , la animación tomará suavemente 8.333% del tiempo para la transición entre esos fotogramas clave.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Este código adjunta nuestra animación a todos los elementos que tienen la clase .RainbowBackground .

La propiedad de animación real toma los siguientes argumentos.

  • animación-name: El nombre de nuestra animación. En este caso, rainbow-background
  • Animación-duración : el tiempo que durará la animación, en este caso 5 segundos.
  • animación-iteración-cuenta (Opcional) : el número de veces que la animación se repetirá. En este caso, la animación continuará indefinidamente. Por defecto, la animación se reproducirá una vez.
  • animación-retraso (Opcional) : especifica cuánto tiempo se debe esperar antes de que comience la animación. El valor predeterminado es 0 segundos y puede tomar valores negativos. Por ejemplo, -2s iniciaría la animación 2 segundos en su bucle.
  • animación-temporización-función (opcional) : especifica la curva de velocidad de la animación. Por defecto es ease , donde la animación comienza lento, se vuelve más rápido y termina lento.

En este ejemplo particular, tanto el 0% como el 100% fotogramas clave especifican { background-color: #ff0000; } . Cuando dos o más fotogramas clave comparten un estado, uno puede especificarlos en una sola declaración. En este caso, las dos líneas de 0% y 100% podrían reemplazarse con esta línea única:

0%, 100%     { background-color: #ff0000; }

Compatibilidad entre navegadores

Para los navegadores basados ​​en WebKit más antiguos, deberá usar el prefijo de proveedor tanto en la declaración @keyframes como en la propiedad de animation , así:

@-webkit-keyframes{}

-webkit-animation: ...