recursal/MDN huggingface dataset:
Animation.play()
================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El método `play()` de la interfaz `Animation` de la Web Animations API (en-US) inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a `play()` reinicia la animación y la reproduce desde el principio.

Sintaxis
--------


```js
animation.play();
```

### Parámetros

Ningun.

### Valor devuelto

`undefined`Ejemplo
-------

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (`aliceChange`) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos `Animation.play()` y un `EventListener`:


```js
// El pastel tiene su propia animación:
var nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// Pausa la animación del pastel para que no se reproduzca inmediatamente.
nommingCake.pause();

// Esta función se reproducirá cuando el usuario haga click o toque
var growAlice = function () {
  // Reproduce la animación de Alicia.
  aliceChange.play();

  // Reproduce la animación del pastel.
  nommingCake.play();
};

// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-play |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation` para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.
* `Animation.pause()` para pausar una animación.
* `Animation.reverse()` para reproducir una animación al revés.
* `Animation.finish()` para finalizar una animación.
* `Animation.cancel()` para cancelar una animación.
Animation.cancel()
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El método `cancel()` de la Web Animations API de la interfaz `Animation` borra todos los `KeyframeEffect` (en-US) causados por esta animación y aborta su reproducción.

**Nota:** Cuando se cancela una animación, su `startTime` y su `currentTime` se establecen en `null`.

Sintaxis
--------


```js
Animation.cancel();
```

### Parámetros

Ningun.

### Valor devuelto

Ningun.

### Excepciones

Este método no arroja excepciones directamente; sin embargo, si la animación `playState` no está `"idle"`"inactiva" cuando se cancela, el current finished promise se rechaza con un `DOMException` llamado `AbortError`.

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-cancel |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `KeyframeEffect` (en-US)
* `Animation`
* `Animation.playState`
* `Animation.finished` devuelve la promesa que esta acción rechazará si la animación de `playState` no está `"idle"` ("inactiva") .
Animation.reverse()
===================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El método `Animation.reverse()` de la interfaz `Animation` Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.

Sintaxis
--------


```js
animation.reverse();
```

### Parámetros

Ningun.

### Valor devuelto

`undefined`Ejemplos
--------

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(`aliceChange`) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el `Animation.playbackRate` de `aliceChange` en `-1` de esta forma:


```js
var shrinkAlice = function () {
  // reproduce la animación de Alicia al revés.
  aliceChange.playbackRate = -1;
  aliceChange.play();

  // reproduce la animación de la botella.
  drinking.play();
};
```


Pero también se podría haber hecho lamando a `reverse()` en `aliceChange` así:


```js
var shrinkAlice = function () {
  // reproduce la animación de Alicia al revés.
  aliceChange.reverse();

  // reproduce la animación de la botella.
  drinking.play();
};
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-reverse |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation` para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.
* `Animation.pause()` para pausar una animación.
* `Animation.play()` para reproducir una animación hacia adelante.
Animation.ready
===============

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad de solo-lectura `Animation.ready` de la Web Animations API (en-US) devuelve un `Promise` que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en play state(estado de reproducción) `"pending"(pendiente)` así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.

**Nota:** Dado que la misma `Promise` es usada para las solicitudes pendientes de `play` y `pause` , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.

Sintaxis
--------


```js
var readyPromise = Animation.ready;
```

### Valor

Un `Promise` que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:


```js
animation.ready.then(function () {
  // Hace lo que sea necesario cuando
  // la animación está lista para reproducirse
});
```

Ejemplo
-------

En el siguiente ejemplo, el estado de la animación será `running(reproduciendo)` cuando la **Promise actual** se resuelva ya que la animación no deja el estado de reproducción `pending` entre las llamadas `pause` and `play` ,por lo tanto, la **Promise actual** no cambia.


```js
animation.pause();
animation.ready.then(function () {
  // Displays 'running'
  alert(animation.playState);
});
animation.play();
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-ready |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
* `Animation.playState`
Animation.onfinish
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad `onfinish` de la interfaz `Animation` (de la Web Animations API (en-US)) es el manejador de eventos para el evento `finish`. Este evento se envía cuando la animación termina de reproducirse.

El evento `finish` ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al método `Animation.finish()` para que la animación termine inmediatamente.

**Nota:** El estado de reproducción `"paused"` reemplaza al estado `"finished"`. Si la animación está pausada y finalizada, el estado`"paused"` será el único reportado. Puedes forzar el estado de la animación a `"finished"` configurando su `startTime` a `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)`.

Sintaxis
--------


```js
var finishHandler = Animation.onfinish;

Animation.onfinish = finishHandler;
```

### Valor

Una función que debe ser llamada para manejar el evento `finish`, o `null` si no se establece ningún manejador para el evento `finish`.

Ejemplos
--------

`Animation.onfinish` es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land Growing/Shrinking Alice Game. Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:


```js
// Agrega una animación a los créditos finales del juego.
var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);

// Pone en Pausa dichos créditos.
bringUI.pause();

// Esta función elimina los eventos de puntero en los créditos.
hide(endingUI);

// Cuando los créditos se hayan desvanecido,
// volvemos a agregar los eventos de puntero cuando terminen.
bringUI.onfinish = function () {
  endingUI.style.pointerEvents = "auto";
};
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
* `Animation.finish()`
Animation.oncancel
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad `oncancel` de la interfaz `Animation` de la Web Animations API (en-US) es el manejador de eventos para el evento `cancel` .

El evento `cancel` puede ser activado manualmente con `Animation.cancel()` cuando la animación entra en estado de reproducción `"idle"(inactivo)` desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.

**Nota:** La creación de una nueva animación, inicialmente inactiva, no activa el evento `cancel` en la nueva animación.

Sintaxis
--------


```js
var cancelHandler = Animation.oncancel;

Animation.oncancel = cancelHandler;
```

### Valor

Una función que será ejecutada cuando la animación sea cancelada, o `null` si no hay un manejador de eventos `cancel`.

Ejemplos
--------

Si esta animación es cancelada, elimina su elemento.


```js
animation.oncancel = animation.effect.target.remove();
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-oncancel |
| Web Animations # cancel-event |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
* The `cancel` event
Animation.currentTime
=====================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad `Animation.currentTime` de la Web Animations API (en-US) devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

Si la animación carece de un `timeline` (en-US), está inactiva, o no ha sido reproducida todavía, el valor devuelto por `currentTime` es `null`.

Sintaxis
--------


```js
var currentTime = Animation.currentTime;
Animation.currentTime = newTime;
```

### Valor

Un número que representa el tiempo actual en milisegundos, o `null` para desactivar la animación.

Ejemplos
--------

En el juego Drink Me/Eat Me, la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el `currentTime` (tiempoActual) a la mitad de la duración total del`KeyframeEffect` (en-US):


```js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
```


Un modo más genérico para encontrar la marca del 50% en una animación sería :


```js
animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-currenttime |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `Animation` para otros métodos y propiedades que puede usar para controlar la animación de la página web.
* `Animation.startTime` para programar el tiempo de inicio de una animación.
* Web Animations API (en-US)
Animation.finished
==================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad de solo-lectura de `Animation.finished` de la Web Animations API (en-US) devuelve un `Promise` que se resuelve una vez que la animación a terminado de reproducirse.

**Nota:** Una vez que la reproducción de la animación abandona el estado `finished` (es decir, la reproducción se está ejecutando otra vez), Un nuevo `Promise` es creado para esta propiedad. El nuevo `Promise` será resuelto cuando se haya completado la actual secuencia de la animación.

Sintaxis
--------


```js
var animationsPromise = Animation.finished;
```

### Valor

Un objeto `Promise` que se resuelve cuando haya finalizado la reproducción de la animación.

Ejemplos
--------

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento `elem` hayan terminado, después elimina el elemento del arbol del DOM:


```js
Promise.all(
  elem.getAnimations().map(function (animation) {
    return animation.finished;
  }),
).then(function () {
  return elem.remove();
});
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-finished |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `KeyframeEffect` (en-US)
* Web Animations API (en-US)
* `Animation`
Animation.pause()
=================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
El método `pause()` de la interfaz `Animation` de la Web Animations API (en-US), suspende la reproducción de la animación.

Sintaxis
--------


```js
animation.pause();
```

### Parámetros

Ningun.

### Valor devuelto

Ningun.

### Excepciones

InvalidStateError

La animación `currentTime` no está resuelta `unresolved` (por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.

Lanza un `InvalidStateError` si el `currentTime` de la animación no está resuelto `unresolved` (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.

Ejemplos
--------

`Animation.pause()` es utilizado en varias ocasiones en el juego Alice in Web Animations API Land Growing/Shrinking Alice Game, porque las animaciones creadas con el método `Element.animate()` se inician de inmediato y deben ser detenidas manualmente para evitar esto:


```js
// animación de la magdalena que lentamente se está comiendo
var nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
nommingCake.pause();
```


Adicionalmente, al restablecer:


```js
// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
var stopPlayingAlice = function () {
  aliceChange.pause();
  nommingCake.pause();
  drinking.pause();
};

// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
cake.addEventListener("mouseup", stopPlayingAlice, false);
bottle.addEventListener("mouseup", stopPlayingAlice, false);
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-pause |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation` para otros métodos y propiedades que puedes usar para el control de animaciones en páginas web.
* `Animation.pause()` para pausar una animación.
* `Animation.reverse()` para reproducir una animación al revés.
* `Animation.finish()` para finalizar una animación.
* `Animation.cancel()` para cancelar una animación.
Animation.playbackRate
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad `Animation.playbackRate` de la Web Animations API (en-US) devuelve o establece la velocidad de reproducción de la animación.

Las animaciones tienen un **playback rate** que proporciona un factor de escala para el cambio de velocidad de la animación `timeline` (en-US) valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es `1`.

Sintaxis
--------


```js
var currentPlaybackRate = Animation.playbackRate;

Animation.playbackRate = newRate;
```

### Valor

Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.

**Nota:** si establecemos el `playbackRate` a `0` pausa la animación de manera efectiva (sin embargo, su `playstate` no se convierte necesariamente en `paused`).

Ejemplos
--------

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia (`aliceChange`) se invierta para reducirse:


```js
var shrinkAlice = function () {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// Con un toque o un click, Alicia se encogerá.
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
```


Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo `aliceChange` hacia adelante otra vez:


```js
var growAlice = function () {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// Con un toque o un click, Alicia crecerá.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```


En otro ejemplo, Red Queen's Race Game, Alicia y La Reina Roja están ralentizandose constantemente:


```js
setInterval(function () {
  // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4

  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate \*= 0.9;
  }
}, 3000);
```


Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su `playbackRate` (velocidad de reproducción):


```js
var goFaster = function () {
  redQueen_alice.playbackRate \*= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-playbackrate |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
AnimationEvent.animationName
============================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de solo-lectura **`AnimationEvent.animationName`** es un `DOMString` conteniendo el valor de la propiedad de CSS `animation-name` asociada con la transición.

Sintaxis
--------
```

name = AnimationEvent.animationName
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationname |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Usando animaciones CSS (en-US)
* Las propiedades CSS relacionadas con animacióny reglas: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes`.
* La interface `AnimationEvent` a la cual pertenece.
range.commonAncestorContainer
=============================

### Resumen

Devuelve el nodo más profundo que contienen los nodos startContainer y endContainer.

### Sintaxis
```

rangeAncestor = range.commonAncestorContainer;
```

### Ejemplo
```

range = document.createRange();
range.setStart(startNode,startOffset);
range.setEnd(endNode,endOffset);
rangeAncestor = range.commonAncestorContainer;
```

### Notas

Devuelve el último nodo, o el más lejano a lo largo del árbol del documento, que contienen los nodos startContainer y endContainer. Ya que un rango no necesita ser contínuo y puede seleccionar nodos parcialmente, ésta es una forma conveniente para encontrar un nodo que encierra un rango.

Esta propiedad es de sólo lectura. Para cambiar el contenedor ancestro de un nodo, considere usar varios métodos para definir las posiciones iniciales y finales de el rango.

### Especificación

commonAncestorContainer