CSS
Animaciones

Sintaxis

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parámetros

Animaciones con la propiedad de transición.

Útil para animaciones simples, la propiedad de transition CSS permite que las propiedades CSS basadas en números se animen entre estados.

Ejemplo

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Ver resultado

De forma predeterminada, al pasar el cursor sobre un elemento con la clase .Example , la altura del elemento saltará a 120px y el color de fondo a rojo ( #ff0000 ).

Al agregar la propiedad de transition , podemos hacer que estos cambios ocurran con el tiempo:

.Example{
    ...
    transition: all 400ms ease;
}

Ver resultado

all valor aplica la transición a todas las propiedades compatibles (basadas en números). Cualquier nombre de propiedad compatible (como height o top ) puede sustituirse por esta palabra clave.

400ms especifica la cantidad de tiempo que tarda la transición. En este caso, el cambio de altura del elemento tardará 400 milisegundos en completarse.

Finalmente, la ease valor es la función de animación, que determina cómo se reproduce la animación. ease significa comenzar lento, acelerar, luego terminar lento nuevamente. Otros valores son linear , de ease-out y de ease-in .

Compatibilidad entre navegadores

La propiedad de transition general está bien soportada en todos los navegadores principales, excepto en IE 9. Para versiones anteriores de Firefox y navegadores basados ​​en Webkit, use los prefijos de los proveedores, como por ejemplo:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Nota: La propiedad de transition puede animar cambios entre dos valores numéricos cualquiera, independientemente de la unidad. También puede pasar entre las unidades, tal como 100px a 50vh . Sin embargo, no puede realizar la transición entre un número y un valor predeterminado o automático, como la transición de la altura de un elemento de 100px a auto .

Incrementando el rendimiento de la animación usando el atributo `will-change`

Al crear animaciones y otras acciones pesadas de GPU, es importante entender el atributo will-change .

Tanto los fotogramas clave de CSS como la propiedad de transition utilizan aceleración de GPU. El rendimiento aumenta al descargar los cálculos a la GPU del dispositivo. Esto se hace creando capas de pintura (partes de la página que se representan individualmente) que se descargan en la GPU para calcular. La propiedad will-change le dice al navegador lo que animará, lo que le permite crear áreas de pintura más pequeñas, lo que aumenta el rendimiento.

La propiedad will-change acepta una lista de propiedades separadas por comas para animarlas. Por ejemplo, si planea transformar un objeto y cambiar su opacidad, debe especificar:

.Example{
    ...
    will-change: transform, opacity;
}

Nota: Usa la will-change moderación. La configuración will-change de will-change para cada elemento en una página puede causar problemas de rendimiento, ya que el navegador puede intentar crear capas de pintura para cada elemento, aumentando significativamente la cantidad de procesamiento realizado por la GPU.

Animaciones con fotogramas clave

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: ...

Ejemplos de sintaxis

Nuestro primer ejemplo de sintaxis muestra la propiedad abreviada de la animación utilizando todas las propiedades / parámetros disponibles:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Nuestro segundo ejemplo es un poco más simple y muestra que algunas propiedades se pueden omitir:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Nuestro tercer ejemplo muestra la declaración más mínima. Tenga en cuenta que el nombre de la animación y la duración de la animación deben declararse:

  animation: 3s         slidein;
  /*         duration | name */

También vale la pena mencionar que cuando se usa la abreviatura de animación, el orden de las propiedades hace la diferencia. Obviamente, el navegador puede confundir su duración con su retraso.

Si la brevedad no es lo tuyo, también puedes omitir la propiedad abreviada y escribir cada propiedad individualmente:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;