--- title: animation-timing-function slug: Web/CSS/animation-timing-function translation_of: Web/CSS/animation-timing-function ---

{{CSSRef}}{{SeeCompatTable}}

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 {{cssxref("<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 {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.

{{cssinfo}}

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 {{cssxref("<timing-function>")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.

Sintaxis formal

{{csssyntax}}

Ejemplos

Visita animaciones CSS para ver algunos ejemplos.

Especificaciones

Especificación Estado Comentario
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}} {{Spec2('CSS3 Animations')}} Definición incial

Compatibilidad entre navegadores

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
{{CompatChrome(43.0)}}		 {{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
{{CompatGeckoDesktop("16.0")}}		 10 12 {{property_prefix("-o")}}
12.10		 4.0{{property_prefix("-webkit")}}
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico {{CompatVersionUnknown}}{{property_prefix("-webkit")}} {{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
{{CompatGeckoMobile("16.0")}}		 {{CompatUnknown}} 12{{property_prefix("-o")}} {{CompatVersionUnknown}}{{property_prefix("-webkit")}} {{CompatUnknown}}

 

Consulte también