Definición de .animation utilizado en CSS
La propiedad .animation en CSS se puede usar para animar muchas otras propiedades de CSS, como color, color de fondo, altura o ancho. Cada .animation debe definirse con el @Keyframes at-regla que luego se llama con la propiedad .animation, como así:
Caso de uso : propiedad CSS animation
Esta propiedad de CSS normalmente se utiliza de esta forma:
.element {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}Otro ejemplo más avanzado de .animation es el siguiente de CODEPEN:
Sintaxis de .animation en CSS
animation: name duration timing-function delay iteration-count direction fill-mode play-state;Valores
| Valor | Descripción |
|---|---|
| Especifica el nombre del fotograma clave que desea vincular al selector | |
| Especifica cuántos segundos o milisegundos tarda en completarse una animación | |
| función de temporización de animación | Especifica la curva de velocidad de la animación. |
| Especifica un retraso antes de que comience la animación. | |
| recuento de iteraciones de animación | Especifica cuántas veces se debe reproducir una animación. |
| Especifica si la animación debe o no reproducirse en reversa en ciclos alternos | |
| Especifica qué valores aplica la animación fuera del tiempo que se está ejecutando | |
| Especifica si la animación se está ejecutando o está en pausa. | |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .animation
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| backdrop-filter | 76.0 | 17.0 | 70.0* | 9.0 -webkit- | 63.0 |
Referencias técnicas
- animation on MDN
- Using CSS animations
- animation on W3C
- Jank busting for better rendering performance
- Web animation at work
- Five ways to animate responsibly
- State Jumping, Negative Delays, Animating Origin, and More
- Starting CSS animations mid-way
- High performance animations
