La animationpropiedad de CSS puede ser utilizado para animar muchas otras propiedades CSS como color, background-color, height, o width. Cada animación debe definirse con la @keyframesregla at que luego se llama con la animationpropiedad, así:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Cada @keyframesregla at define lo que debería suceder en momentos específicos durante la animación. Por ejemplo, 0% es el comienzo de la animación y 100% es el final. Estos fotogramas clave se pueden controlar mediante la animationpropiedad abreviada , o sus ocho subpropiedades, para dar más control sobre cómo se deben manipular esos fotogramas clave.
Subpropiedades
animation-name: declara el nombre de la@keyframesregla at a manipular.animation-duration: el tiempo que tarda una animación en completar un ciclo.animation-timing-function: establece curvas de aceleración preestablecidas comoeaseolinear.animation-delay: el tiempo entre el elemento que se carga y el inicio de la secuencia de animación (ejemplos interesantes).animation-direction: establece la dirección de la animación después del ciclo. Su valor predeterminado se restablece en cada ciclo.animation-iteration-count: el número de veces que se debe realizar la animación.animation-fill-mode: establece qué valores se aplican antes / después de la animación.
Por ejemplo, puede configurar el último estado de la animación para que permanezca en la pantalla, o puede configurarlo para que vuelva al anterior cuando comenzó la animación.animation-play-state: pausa / reproduce la animación.
Estas subpropiedades se pueden usar así:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Aquí hay una lista completa de los valores que puede tomar cada una de estas subpropiedades:
animation-timing-function | facilidad, facilidad de salida, facilidad de entrada, facilidad de entrada y salida, lineal, cúbico-bezier (x1, y1, x2, y2) (por ejemplo, cúbico-bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs o Xms |
animation-delay | Xs o Xms |
animation-iteration-count | X |
animation-fill-mode | adelante, atrás, ambos, ninguno |
animation-direction | normal, alterno |
animation-play-state | en pausa, corriendo, corriendo |
Varios pasos
Si una animación tiene las mismas propiedades iniciales y finales, es útil separar por comas los valores 0% y 100% dentro @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Varias animaciones
También puede separar los valores por comas para declarar varias animaciones en un selector. En el siguiente ejemplo, queremos cambiar el color del círculo en un momento @keyframemientras también lo empujamos de lado a lado con otro.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Rendimiento
La animación de la mayoría de las propiedades es un problema de rendimiento, por lo que debemos proceder con precaución antes de animar cualquier propiedad. Sin embargo, hay ciertas combinaciones que se pueden animar de forma segura:
transform: translate()transform: scale()transform: rotate()opacity
¿Qué propiedades se pueden animar?
MDN tiene una lista de propiedades CSS que se pueden animar. Las propiedades animables tienden a colores y números. Un ejemplo de una propiedad no animable es background-image.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5,1 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Más información
- animación en MDN
- Usando animaciones CSS
- animación en W3C
- Jank revienta para un mejor rendimiento de renderizado
- Animación web en el trabajo
- Cinco formas de animar responsablemente
- Salto de estado, retrasos negativos, origen de animación y más
- Iniciando animaciones CSS a mitad de camino
- Animaciones de alto rendimiento
