From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/css/animation-timing-function/index.html | 141 +++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 files/es/web/css/animation-timing-function/index.html (limited to 'files/es/web/css/animation-timing-function') diff --git a/files/es/web/css/animation-timing-function/index.html b/files/es/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..3ab99bb113 --- /dev/null +++ b/files/es/web/css/animation-timing-function/index.html @@ -0,0 +1,141 @@ +--- +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ónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Definición incial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome 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

+ + -- cgit v1.2.3-54-g00ecf