initial commit

4 files changed, 728 insertions, 0 deletions

diff --git a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html
new file mode 100644
index 0000000000..11bb0c0076
--- /dev/null
+++ b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html
@@ -0,0 +1,91 @@
+---
+title: Detectar soporte de animación CSS
+slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<p>{{CSSRef}}</p>
+
+<p>Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en <a class="external" href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/" title="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">la publicación</a> de Chris Heilmann, demuestra una técnica de como hacer esto.</p>
+
+<h2 id="Prueba_de_la_compatibilidad_de_animaciones_CSS">Prueba de la compatibilidad de animaciones CSS</h2>
+
+<p>Este código comprueba si el soporte de animaciones CSS esta disponible:</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable <code>animation</code> a <code>false</code>. Establecemos <code>la variable animationstring</code> a <code>animation</code> la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable <code>pfx</code> a una cadena vacía.</p>
+
+<p>Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable <code>elm</code>. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.</p>
+
+<p>Si el navegador no soporta animaciones sin prefijos, y <code>animation</code> sigue siendo <code>false</code>, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a <code>AnimationName</code> en su lugar.</p>
+
+<p>Una vez que el código ha terminado de ejecutarse, el valor de <em><code>animation </code></em>será <em><code>false</code> </em>si el soporte de animacion CSS no esta disponible, de otro modo será <em><code>true</code></em>. Si es <em><code>true</code> </em>tanto el nombre de las propiedad de <code>animation</code> y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será <code>MozAnimation</code> y el prefijo keyframe será <code>-moz-</code>, mientras en Chrome será <code>WebkitAnimation</code> y <code>-webkit-</code>. Tenga en cuenta que los navegadores no facilitan el cambio entre <em>camelCase </em>(Capitalizacion medial) y la<em> hyphen-ation</em> (separación).</p>
+
+<h2 id="Animaciones_utilizando_la_sintaxis_correcta_para_diferentes_navegadores">Animaciones utilizando la sintaxis correcta para diferentes navegadores</h2>
+
+<p>Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Este código examina el valor de <em><code>animation</code></em>; si es <em><code>false</code></em>, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.</p>
+
+<p>Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir <code>keyframes</code> es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).</p>
+
+<p>Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable <code>keyframes</code>, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.</p>
+
+<p>La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.</p>
+
+<p>Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Ver en el JSFiddle</a></p>
+
+<h2 id="Ver_tambien">Ver tambien</h2>
+
+<ul>
+ <li><a href="es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS" title="en/CSS/CSS animations">Animaciones CSS</a></li>
+</ul>
diff --git a/files/es/web/css/css_animations/index.html b/files/es/web/css/css_animations/index.html
new file mode 100644
index 0000000000..7c953b2359
--- /dev/null
+++ b/files/es/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/es/web/css/css_animations/tips/index.html b/files/es/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..1053ef24ac
--- /dev/null
+++ b/files/es/web/css/css_animations/tips/index.html
@@ -0,0 +1,150 @@
+---
+title: Animaciones CSS tips y trucos
+slug: Web/CSS/CSS_Animations/Tips
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<div>Las Animaciones con CSS hacen posible crear cosas increíbles con los elementos que forman parte de tus documentos y apps . Sin embargo, hay cosas que deseas hacer que no son evidentes, o soluciones inteligentes que quizás no encuentres de inmediato. Este artículo es una colección de tips y trucos que hemos encontrado que podrían hacer más fácil el trabajo, incluido cómo volver a ejecutar una animación detenida.</div>
+
+<h2 id="Corriendo_una_animación_de_nuevo">Corriendo una animación de nuevo</h2>
+
+<p>La especificación de CSS Animations no ofrece una forma de ejecutar una animación nuevamente. No hay un método mágico de <code>resetAnimation()</code> en los elementos, y tu no puedes solo configurar el elemento {{cssxref("animation-play-state")}} para <code>"correr"</code> de nuevo. En su lugar debes usar trucos inteligentes para que una animación detenida se reproduzca.</p>
+
+<p>Aquí te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte</p>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<p>Primero, definamos el HTML para un {{HTMLElement("div")}}  que deseamos animar y un botón que ejecurara (o repetira) la animación.</p>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS</h3>
+
+<p>Ahora definiremos la animación en si usando CSS. Algún CSS que no es importante (el estilo del botón "Run" en sí)  no se muestran aquí, por brevedad.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>Aquí hay dos clases. La clase <code>"box"</code> es un descripción básica de la apariencia de la caja, sin ninguna información de la animación incluida. Los detalles de la animación son incluidos en la clase <code>"changing"</code> class, que dice que {{cssxref("@keyframes")}} llamado <code>"colorchange"</code> debe usarse en el transcurso de dos segundo para animar la caja.</p>
+
+<p>Note que debido a esto, la caja no comienza con ningún efecto de animación en su lugar, por lo que no se animará</p>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<p>Ahora veremos el JavaScript que jace el trabajo. La escencia de la técnica esta en la función <code>play()</code>, que se llama cuando el usuario hace clic en  el botón "Run".</p>
+
+<pre class="brush: js notranslate">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reproducir una animación es eleminar el efecto de animación, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animación al elemento. Para que eso suceda, tenemos que ser creativos.</p>
+
+<p>Esto es lo que sucede cuando la función <code>play()</code> es llamada:</p>
+
+<ol>
+ <li> La lista de clases CSS de caja se restablece a <code>"box"</code>. Esto tiene el efecto de remover   cualquier otra clase recurrente aplicada a la caja, incluida la clase <code>"changing"</code> que       controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo  y se ha producido una actualización para reflejar el cambio.</li>
+ <li>Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...</li>
+ <li>Nuestro callback habilmente llama a <code>requestAnimationFrame()</code> ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase <code>"changing"</code>  de nuevo en la caja, para que el repaint inicie la animación una vez más.</li>
+</ol>
+
+<p>Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón  "Run" para que en verdad haga algo</p>
+
+<pre class="brush: js notranslate">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Detener_la_animación">Detener la animación</h2>
+
+<p>Simplemente removemos {{cssxref("animation-name")}} aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animación se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:</p>
+
+<ol>
+ <li>Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar en<code>animation-direction: alternate</code>. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.</li>
+ <li>Use JavaScript y borre la animación  que se esta utilizando cuando se activa el evento <code>animationiteration</code>.</li>
+</ol>
+
+<p>El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:</p>
+
+<pre class="brush: css notranslate">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js notranslate">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html
new file mode 100644
index 0000000000..b9b08bbc0b
--- /dev/null
+++ b/files/es/web/css/css_animations/usando_animaciones_css/index.html
@@ -0,0 +1,351 @@
+---
+title: Usando animaciones CSS
+slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p>
+
+<p><strong>Las animaciones CSS3</strong> permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.</p>
+
+<p>Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:</p>
+
+<ol>
+ <li>Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.</li>
+ <li>La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.</li>
+ <li>Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.</li>
+</ol>
+
+<h2 id="Configurando_la_animación">Configurando la animación</h2>
+
+<p>Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas <strong>no</strong> configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .</p>
+
+<p>Las subpropiedades de {{ cssxref("animation") }} son:</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>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.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>El número de veces que se repite. Podemos indicar <code>infinite</code> para repetir la animación indefinidamente.</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>Permite pausar y reanudar la secuencia de la animación</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).</dd>
+</dl>
+
+<h2 id="Definiendo_la_secuencia_de_la_animación_con_fotogramas">Definiendo la secuencia de la animación con fotogramas</h2>
+
+<p>Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.</p>
+
+<p>Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: <code>from</code> y <code>to</code>.</p>
+
+<p>Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<div class="note"><strong>Nota:</strong> Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo <code>-webkit</code>.</div>
+
+<h3 id="Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador">Haciendo que un texto se delice por la ventana del navegador</h3>
+
+<p>Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.</p>
+
+<p>Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}<code>:hidden</code> en el contenedor.</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".</p>
+
+<p>Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.</p>
+
+<p>Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias <code>from</code>). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.</p>
+
+<p>El segundo (y último) fotograma sucede en el 100% (hemos usado su alias <code>to</code>). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;</pre>
+
+<p>(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)</p>
+
+<p>{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}</p>
+
+<h3 id="Añadiendo_otro_fotograma">Añadiendo otro fotograma</h3>
+
+<p>Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:</p>
+
+<pre class="brush: css notranslate">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.</p>
+
+<p>(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)</p>
+
+<p>{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}</p>
+
+<h3 id="Haciendo_que_se_repita">Haciendo que se repita</h3>
+
+<p>Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  <code>infinite</code> para que la animación se repita indefinidamente:</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}</p>
+
+<h3 id="Moviendolo_hacia_adelante_y_hacia_atrás">Moviendolo hacia adelante y hacia atrás</h3>
+
+<p>Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es <code>alternate</code>:</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}</p>
+
+<h3 id="Usando_la_versión_abreviada_animation">Usando la versión abreviada animation</h3>
+
+<p>La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:</p>
+
+<pre class="notranslate"><code>p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}</code></pre>
+
+<p>Se puede reemplazar por</p>
+
+<pre class="notranslate"><code>p {
+  animation: 3s infinite alternate slidein;
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} </p>
+</div>
+
+<h3 id="Estableciendo_multiples_valores_de_propiedades_animation">Estableciendo multiples valores de propiedades animation</h3>
+
+<p>Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:</p>
+
+<p>En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</code>
+</pre>
+
+<p>En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo <code>fadeInOut</code> tiene una duración de 2.5s y 2 iteraciones, etc.</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</code></pre>
+
+<p>En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, <code>fadeInOut</code> obtiene una duración de 2.5s y <code>moveLeft300px</code> obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto <code>bounce</code>  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.</p>
+
+<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</code></pre>
+
+<h3 id="Usando_eventos_de_animación">Usando eventos de animación</h3>
+
+<p>Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.</p>
+
+<p>Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.</p>
+
+<h4 id="Agregando_CSS">Agregando CSS</h4>
+
+<p>Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama <code>slidein</code>, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, <code>width</code> y <code>margin-left</code> son manipulados para hacer que el elemento se deslice por la pantalla.</p>
+
+<pre class="brush: css notranslate">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+
+<h4 id="Añadiendo_detectores_de_eventos_a_la_animación">Añadiendo detectores de eventos a la animación</h4>
+
+<p>Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.</p>
+
+<pre class="brush: js notranslate">var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";</pre>
+
+<p>Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.</p>
+
+<p>La última línea pone la clase <code>slidein</code> al elemento para comenzar la animación. ¿Por qué?. Porque que el evento <code>animationstart</code> se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.</p>
+
+<h4 id="Recibiendo_los_eventos">Recibiendo los eventos</h4>
+
+<p>Los eventos, al irse disparando, llamarán a la función <code>listener()</code>.</p>
+
+<pre class="brush: js notranslate">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.</p>
+
+<p>El resultado, si todo ha ido bien, será algo parecido a esto:</p>
+
+<ul>
+ <li>Iniciado: tiempo transcurrido 0</li>
+ <li>Nueva iteración comenzó a los 3.01200008392334</li>
+ <li>Nueva iteración comenzó a los 6.00600004196167</li>
+ <li>Finalizado: tiempo transcurrido 9.234000205993652</li>
+</ul>
+
+<p>Fijémonos en que despues de la iteración final de la animación, el evento <code>animationiteration</code> no se envía, en su lugar se lanza <code>animationend</code>.</p>
+
+<h4 id="El_HTML">El HTML</h4>
+
+<p>Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.</p>
+
+<pre class="brush: html notranslate">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+&lt;p&gt;
+  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
+  elements move across the page.&lt;/p&gt;
+&lt;p&gt;
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}</p>
+
+<h2 id="Te_puede_interesar_también">Te puede interesar también</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+</ul>