initial commit

1 files changed, 208 insertions, 0 deletions

diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html
new file mode 100644
index 0000000000..e491efc0d7
--- /dev/null
+++ b/files/es/web/api/element/animate/index.html
@@ -0,0 +1,208 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+  - Animacion
+  - Elemento
+  - Experimental
+  - metodo
+  - waapi
+  - web animations api
+translation_of: Web/API/Element/animate
+---
+<div>
+<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+
+<p>El método <strong><code>Element.animate()</code></strong> es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .</p>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+</div>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto formateado para representar un conjunto de fotogramas clave</a>.</p>
+ </dd>
+ <dt><code>opciones</code></dt>
+ <dd>Puede ser un<strong> entero</strong> <strong>representando la duración de la animación</strong>  (en milisegundos), <strong>o</strong> un Objeto conteniendo una o más propiedades de sincronización: </dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd><code>Una propiedad única para animar()</code>: a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> con la cual se hace referencia a la animación.</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Opciones_Futuras">Opciones Futuras</h4>
+
+<p><span id="result_box" lang="es"><span>Las</span> <span>siguientes</span> <span>opciones</span> <span>actualmente no</span> <span>se han enviado</span> <span>a todos los sitios</span><span>, pero</span> <span>se añadirán</span> <span>en un futuro próximo</span><span>.</span></span></p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. <code>Valores predeterminados a reemplazar</code>.
+ <ul>
+  <li><code>añadir dicta un efecto aditivo</code>, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con <code>transform</code>, a <code>translateX(-200px)</code> no anularía un valor anterior <code>rotate(20deg)</code> que resultaría  <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>acumular es similar pero un poco más inteligente</code>: <code>blur(2)</code> y <code>blur(5)</code> resultaría  <code>blur(7)</code>, no <code>blur(2) blur(5)</code>.</li>
+  <li><code>remplazar sobreescribe el valor anterior con el nuevo</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Determina como se construyen los valores de una iteración a otra en esta animación. . <code>Se puede configurar para acumular o reemplazar</code> (ver arriba). <code>Valores predeterminados para reemplazar</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. <code>Valores predeterminados para distribuir</code>.
+ <ul>
+  <li><code>distribuir las posiciones de los</code> 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.</li>
+  <li><code>situar las posiciones de los</code> 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.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Returns an {{domxref("Animation")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En la demostración <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (con la Web Animation API)</a>, utilizamos el método conveniente, <code>animate()</code> para inmediatamente crear y ejecutar una animación en el elemento  <code>#tunnel</code>  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.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
+</div>