animation-timing-function

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 inicialease
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel 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 en animació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 ?

 

Consulte también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: mrstork, Boton
 Última actualización por: mrstork,