This page was translated from English by the community. Learn more and join the MDN Web Docs community.

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(<number [0,1]>, <number>, <number [0,1]>, <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