animation-timing-function

Experimental

Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.

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> (en-US).

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
Valor calculadocomo se especifica
Animation typediscrete

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> (en-US) representa la timing function vinculada a la propiedad correspondiente a animar, como se define en animaci贸n-propiedad.

Sintaxis formal

<easing-function># (en-US)

where
<easing-function> = linear | (en-US) <cubic-bezier-timing-function> | (en-US) <step-timing-function>

where
<cubic-bezier-timing-function> = ease | (en-US) ease-in | (en-US) ease-out | (en-US) ease-in-out | (en-US) cubic-bezier([0,1] (en-US)>, <number>, [0,1] (en-US)>, <number>)
<step-timing-function> = step-start | (en-US) step-end | (en-US) steps(<integer>[ (en-US), <step-position>] (en-US)? (en-US))

where
<step-position> = jump-start | (en-US) jump-end | (en-US) jump-none | (en-US) jump-both | (en-US) start | (en-US) end

Ejemplos

Visita animaciones CSS para ver algunos ejemplos.

Especificaciones

Especificaci贸n Estado Comentario
CSS Animations Level 1
La definici贸n de 'animation-timing-function' en esta especificaci贸n.
Working Draft Definici贸n incial

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Caracter铆stica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte b谩sico (Yes)-webkit (en-US)
43.0
5.0 (5.0)-moz (en-US)
16.0 (16.0)
10 12 -o (en-US)
12.10
4.0-webkit (en-US)
Caracter铆stica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte b谩sico (Yes)-webkit (en-US) 5.0 (5.0)-moz (en-US)
16.0 (16.0)
? 12-o (en-US) (Yes)-webkit (en-US) ?

 

Consulte tambi茅n