From a901ccf2b7747322b75d9f81014d7d88426bea8a Mon Sep 17 00:00:00 2001 From: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com> Date: Sun, 13 Feb 2022 22:34:05 -0500 Subject: Content sync and updated to md | Element.animate [ES] (#4092) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * sync and updated to md * Apply suggestions from code review Co-authored-by: Juan Vásquez * Update index.md Co-authored-by: Juan Vásquez --- files/es/web/api/element/animate/index.html | 208 ---------------------------- files/es/web/api/element/animate/index.md | 82 +++++++++++ 2 files changed, 82 insertions(+), 208 deletions(-) delete mode 100644 files/es/web/api/element/animate/index.html create mode 100644 files/es/web/api/element/animate/index.md (limited to 'files/es/web/api') diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html deleted file mode 100644 index e491efc0d7..0000000000 --- a/files/es/web/api/element/animate/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Element.animate() -slug: Web/API/Element/animate -tags: - - API - - Animacion - - Elemento - - Experimental - - metodo - - waapi - - web animations api -translation_of: Web/API/Element/animate ---- -
-

{{APIRef('Web Animations')}} {{SeeCompatTable}}

- -

El método Element.animate() es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .

- -

Síntaxis

- -
-
element.animate(keyframes, options); 
-
- -

Parámetros

- -
-
keyframes
-
-

Un Objeto formateado para representar un conjunto de fotogramas clave.

-
-
opciones
-
Puede ser un entero representando la duración de la animación  (en milisegundos), o un Objeto conteniendo una o más propiedades de sincronización: 
-
-
-
id {{optional_inline}}
-
Una propiedad única para animar(): a DOMString con la cual se hace referencia a la animación.
-
- {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
-
- -

Opciones Futuras

- -

Las siguientes opciones actualmente no se han enviado a todos los sitios, pero se añadirán en un futuro próximo.

- -
-
composite {{optional_inline}}
-
Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. Valores predeterminados a reemplazar. -
    -
  • añadir dicta un efecto aditivo, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con transform, a translateX(-200px) no anularía un valor anterior rotate(20deg) que resultaría  translateX(-200px) rotate(20deg).
    • -
  • acumular es similar pero un poco más inteligente: blur(2) y blur(5) resultaría  blur(7), no blur(2) blur(5).
    • -
  • remplazar sobreescribe el valor anterior con el nuevo.
    • -
-
-
iterationComposite {{optional_inline}}
-
Determina como se construyen los valores de una iteración a otra en esta animación. . Se puede configurar para acumular o reemplazar (ver arriba). Valores predeterminados para reemplazar.
-
spacing {{optional_inline}}
-
Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. Valores predeterminados para distribuir. -
    -
  • distribuir las posiciones de los keyframes para que la diferencia entre el anterior y el  posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.
    • -
  • situar las posiciones de los keyframes de manera que  igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada  , lo que es como decir,  que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.
    • -
- -

 

-
-
- -

Valor de retorno

- -

Returns an {{domxref("Animation")}}.

- -

Ejemplo

- -

En la demostración Down the Rabbit Hole (con la Web Animation API), utilizamos el método conveniente, animate() para inmediatamente crear y ejecutar una animación en el elemento  #tunnel  para hacerlo fluir hacia arriba, indefinidamente. Observar el orden  de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.

- -
document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translateY(0px)' },
-  { transform: 'translateY(-300px)' }
-], {
-  // timing options
-  duration: 1000,
-  iterations: Infinity
-});
-
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("36")}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}23{{CompatUnknown}}
id option{{CompatChrome(50.0)}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}37{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(39.0)}}{{CompatChrome(39.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
id option{{CompatNo}}{{CompatChrome(50.0)}}{{CompatChrome(50.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver También

- - -
diff --git a/files/es/web/api/element/animate/index.md b/files/es/web/api/element/animate/index.md new file mode 100644 index 0000000000..8f1a3f3f0e --- /dev/null +++ b/files/es/web/api/element/animate/index.md @@ -0,0 +1,82 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +translation_of: Web/API/Element/animate +browser-compat: api.Element.animate +--- +{{APIRef('Web Animations')}} + +El método **`animate()`** de la interfaz {{domxref("Element")}} es un método abreviado el cual crea un nuevo {{domxref("Animation")}}, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto {{domxref("Animation")}}. + +> **Nota:** Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una +> lista de las animaciones que afectan a un elemento llamando a {{domxref("Element.getAnimations()")}}. + +## Síntaxis + +```js +animate(keyframes, options) +``` + +### Parámetros + +- `keyframes` + - : Puede ser un arreglo de objetos de fotogramas clave **o** un objeto de fotogramas clave + cuyas propiedades son arreglos de valores a iterar. Ver [Keyframe Formats](/es/docs/Web/API/Web_Animations_API/Keyframe_Formats) + para más detalles. +- `options` + + - : Puede ser un **entero representando la duración de la animación** (en milisegundos), **o** un + objeto que contiene una o más propiedades acerca del tiempo descritas en los + [los parametros de opciones del `KeyframeEffect()`](/es/docs/Web/API/KeyframeEffect) y/o las + siguientes opciones: + + - `id {{optional_inline}}` + - : Una propiedad única `animate()` para animar: una [`DOMString`](/es/docs/Web/API/DOMString) la cual hace referencia a la animación. + +### Valor de retorno + +Regresa una {{domxref("Animation")}}. + +## Ejemplos + +En la demostración [Down the Rabbit Hole (con la API de Animaciones Web)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), +utilizamos el método conveniente, `animate()` para inmediatamente crear y reproducir una animación en el elemento `#tunnel` +para hacerlo fluir hacia arriba, indefinidamente. Observa el arreglo de los objetos enviados como fotogramas clave y también el bloque de opciones de sincronización. + +```js +document.getElementById("tunnel").animate([ +  // fotogramas clave +  { transform: 'translateY(0px)' }, +  { transform: 'translateY(-300px)' } +], { +  // opciones de sincronización +  duration: 1000, +  iterations: Infinity +}); +``` + +### Implicito a/desde fotogramas clave + +En versiones más recientes de navegadores, se te permite declarar el estado de inicio o fin únicamente para una animación (por ejemplo: un simple fotograma clave), y el navegador inferirá la otra parte de la animación si está habilitado. Por ejemplo, considera [esta simple animación](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html) — el objeto de fotograma clave se ve así: + +```js +let rotate360 = [ + { transform: 'rotate(360deg)' } +]; +``` + +Solamente hemos especificado el fin del estado de la animación, y el estado inicial está implícito. + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- [API de Animaciones Web](/es/docs/Web/API/Web_Animations_API) +- {{domxref("Element.getAnimations()")}} +- {{domxref("Animation")}} -- cgit v1.2.3-54-g00ecf