This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Resumen
La propiedad CSS animation-timing-function especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias <timing-function>.
Para animaciones con keyframes, la timing function se aplica entre los keyframes en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.
Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.
A menudo, es conveniente usar la propiedad abreviada animation para ajustar las propiedades de animación una sola vez.
| Valor inicial | ease |
|---|---|
| Applies to | todos los elementos y los pseudoelementos ::before y ::after |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Sintaxis
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* Multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* Global values */ animation-timing-function: inherited; animation-timing-function: initial; animation-timing-function: unset;
Valores
<timingfunction>- Cada
<timing-function>representa la timing function vinculada a la propiedad correspondiente a animar, como se define enanimación-propiedad.
Sintaxis formal
<timing-function>#
Ejemplos
Visita animaciones CSS para ver algunos ejemplos.
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Animations The definition of 'animation-timing-function' in that specification. |
Working Draft | Definición incial |
Compatibilidad entre navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | (Yes)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 |
4.0-webkit |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|
| Soporte básico | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
? | 12-o | (Yes)-webkit | ? |