From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/animation-direction/index.html | 167 ++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/es/web/css/animation-direction/index.html (limited to 'files/es/web/css/animation-direction') diff --git a/files/es/web/css/animation-direction/index.html b/files/es/web/css/animation-direction/index.html new file mode 100644 index 0000000000..cdc0973157 --- /dev/null +++ b/files/es/web/css/animation-direction/index.html @@ -0,0 +1,167 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - Experemiental + - Reference +translation_of: Web/CSS/animation-direction +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

+ +

Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
+
+ +
animation-direction: normal
+animation-direction: reverse
+animation-direction: alternate
+animation-direction: alternate-reverse
+animation-direction: normal, reverse
+animation-direction: alternate, reverse, normal
+
+ +

Valores

+ +
+
normal
+
Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
+
alternate
+
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.
+
reverse
+
Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.
+
alternate-reverse
+
Es similar a alternate pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.
+
+ +

Ejemplos

+ +

Visitar animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}{{ Spec2('CSS3 Animations') }}For the two new values, see the W3C discussion.
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}
1012{{ property_prefix("-o") }}
+ 12.5 #
4.0{{ property_prefix("-webkit") }}
reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
alternate-reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
alternate-reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consulte también

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