path: root/files/es/web/css/transiciones_de_css/index.html

---
title: Transiciones de CSS
slug: Web/CSS/Transiciones_de_CSS
tags:
  - CSS
  - Gecko
  - Transiciones de CSS
translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
---
<p>{{ SeeCompatTable() }}</p>

<p>Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.</p>

<div class="note"><strong>Nota:</strong> como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como <code>-moz-transition</code>, <code>-webkit-transition </code>y <code>-o-transition</code>.</div>

<h2 id="Las_propiedades_de_transición_CSS">Las propiedades de transición CSS</h2>

<p>Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.</p>

<p>Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:</p>

<dl>
 <dt>{{ cssxref("transition-property") }}</dt>
 <dd>Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.</dd>
 <dt>{{ cssxref("transition-duration") }}</dt>
 <dd>Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.</dd>
 <dt>{{ cssxref("transition-timing-function") }}</dt>
 <dd>Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.</dd>
 <dt>{{ cssxref("transition-delay") }}</dt>
 <dd>Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.</dd>
</dl>

<h2 id="Detectar_la_finalización_de_una_transición">Detectar la finalización de una transición</h2>

<p>Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es <code>transitionend</code>, en Opera, <code>OTransitionEnd</code> y en WebKit es <code>webkitTransitionEnd</code>. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento <code>transitionend</code> ofrece dos propiedades:</p>

<dl>
 <dt><code>propertyName</code></dt>
 <dd>Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.</dd>
 <dt><code>elapsedTime</code></dt>
 <dd>Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.</dd>
</dl>

<p>Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:</p>

<pre>el.addEventListener("transitionend", updateTransition, true);
</pre>

<div class="note"><strong>Nota</strong>: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.</div>

<h2 id="Propiedades_que_pueden_ser_animadas">Propiedades que pueden ser animadas</h2>

<p>Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.</p>

<div class="note"><strong>Nota</strong>: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.</div>



<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Propiedad</td>
   <td class="header">Tipo de valor</td>
  </tr>
  <tr>
   <td>{{ cssxref("background-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("background-image") }}</td>
   <td>solo degradado; no está implementado en Firefox (see {{ bug(536540) }})</td>
  </tr>
  <tr>
   <td>{{ cssxref("background-position") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("background-size") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("border-color") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;color&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("border-radius") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("border-width") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("border-spacing") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("bottom") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-box-flex") }}</td>
   <td>número</td>
  </tr>
  <tr>
   <td>{{ cssxref("box-shadow") }}</td>
   <td>sombra</td>
  </tr>
  <tr>
   <td>{{ cssxref("color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-column-count") }}</td>
   <td>número</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-column-gap") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}, palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-column-rule-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-column-rule-width") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}, palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-column-width") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("clip") }}</td>
   <td>rectágulo</td>
  </tr>
  <tr>
   <td>{{ svgattr("fill") }}</td>
   <td>pintar</td>
  </tr>
  <tr>
   <td>{{ svgattr("fill-opacity") }}</td>
   <td>valor de opacidad</td>
  </tr>
  <tr>
   <td>{{ svgattr("flood-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("font-size") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("font-size-adjust") }}</td>
   <td>números, palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("font-stretch") }}</td>
   <td>palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("font-weight") }}</td>
   <td>números| palabras clave (excluyendo <code>bolder</code>, <code>lighter</code>)</td>
  </tr>
  <tr>
   <td>{{ cssxref("height") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-image-region") }}</td>
   <td><code>rect()</code></td>
  </tr>
  <tr>
   <td>{{ cssxref("left") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("letter-spacing") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ svgattr("lighting-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("line-height") }}</td>
   <td>número | {{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("margin") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("marker-offset") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("max-height") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("max-width") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("min-height") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("min-width") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("opacity") }}</td>
   <td>número</td>
  </tr>
  <tr>
   <td>{{ cssxref("outline-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("outline-offset") }}</td>
   <td>entero</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-outline-radius") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("outline-width") }}</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("padding") }} (including sub-properties)</td>
   <td>{{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("right") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ svgattr("stop-color") }}</td>
   <td>{{cssxref("&lt;color&gt;")}} | palabras clave</td>
  </tr>
  <tr>
   <td>{{ svgattr("stop-opacity") }}</td>
   <td>valor de opacidad</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke") }}</td>
   <td>pintar</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke-dasharray") }}</td>
   <td>dasharray</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke-dashoffset") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke-miterlimit") }}</td>
   <td>miterlimit</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke-opacity") }}</td>
   <td>valor de opacidad</td>
  </tr>
  <tr>
   <td>{{ svgattr("stroke-width") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("text-indent") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("text-shadow") }}</td>
   <td>sombra</td>
  </tr>
  <tr>
   <td>{{ cssxref("top") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-transform-origin") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}, keywords</td>
  </tr>
  <tr>
   <td>{{ cssxref("-moz-transform") }}</td>
   <td>transform-function</td>
  </tr>
  <tr>
   <td>{{ cssxref("vertical-align") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}, palabras clave</td>
  </tr>
  <tr>
   <td>{{ cssxref("visibility") }}</td>
   <td>visibilidad</td>
  </tr>
  <tr>
   <td>{{ cssxref("width") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("word-spacing") }}</td>
   <td>{{cssxref("&lt;percentage&gt;")}} | {{cssxref("&lt;length&gt;")}}</td>
  </tr>
  <tr>
   <td>{{ cssxref("z-index") }}</td>
   <td>entero</td>
  </tr>
 </tbody>
</table>

<h2 id="Cuando_las_listas_de_valores_de_propiedades_tienen_longitudes_diferentes">Cuando las listas de valores de propiedades tienen longitudes diferentes</h2>

<p>Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
</pre>

<p>Se considera como si fuera:</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}</pre>

<p>De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}</pre>

<p>Se interpreta como:</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}</pre>

<h2 id="Funciones_de_intervalos_de_transición">Funciones de intervalos de transición</h2>

<p>Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:</p>

<p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>

<p>En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:</p>

<ul>
 <li><strong>ease</strong>, equivalente a <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li>
 <li><strong>linear</strong>, equivalente a <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li>
 <li><strong>ease-in</strong>, equivalente a <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li>
 <li><strong>ease-out</strong>, equivalente a <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li>
 <li><strong>ease-in-out</strong>, equivalente a <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
</ul>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Una_muestra_del_efecto_de_transición">Una muestra del efecto de transición</h3>

<p>Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.</p>

<p>En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:</p>

<pre class="deki-transform">&lt;ul&gt;
  &lt;li id="long1"&gt;Transición larga, gradual...&lt;/li&gt;
  &lt;li id="fast1"&gt;Transición muy rápida...&lt;/li&gt;
  &lt;li id="delay1"&gt;Transición larga de un minuto de retraso...&lt;/li&gt;
  &lt;li id="easeout"&gt;Usar intervalos de alejamiento...&lt;/li&gt;
  &lt;li id="linear"&gt;Usar intervalos lineales...&lt;/li&gt;
  &lt;li id="cubic1"&gt;Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
&lt;/ul&gt;
</pre>

<p>Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.</p>

<h4 id="Usar_un_retraso">Usar un retraso</h4>

<p>Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:</p>

<pre class="deki-transform">#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
</pre>

<h4 id="Usar_una_función_de_intervalos_de_transición_lineales">Usar una función de intervalos de transición lineales</h4>

<p>De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición <code>linear</code>, tal y como se muestra a continuación.</p>

<pre>transition-timing-function: linear;
</pre>

<p>Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.</p>

<h4 id="Especificar_una_función_de_intervalos_cúbicos_bézier">Especificar una función de intervalos cúbicos bézier</h4>

<p>Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:</p>

<pre>  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
</pre>

<p>Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).</p>

<h3 id="Menús_de_resaltado">Menús de resaltado</h3>

<p>Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.</p>

<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">vistazo directamente a la CSS</a> que usa.</p>

<p>Primero configuramos el menú usando HTML:</p>

<pre class="deki-transform">&lt;div class="sidebar"&gt;
  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Inicio&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;Acerca de&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contacto Us&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Vínculos&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:</p>

<pre>.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  -moz-box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color;
  -o-transition-duration: 1s;
  background-color:white;
  color:black;
  -moz-box-shadow: 2px 2px 1px black;
}
</pre>

<p>Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.</p>

<p>En lugar de describir el efecto con todo detalle, puedes echar un <a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">vistazo a la muestra en vivo</a> si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).</p>

<h3 id="Usar_eventos_de_transición_para_animar_un_objeto">Usar eventos de transición para animar un objeto</h3>

<p>En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.</p>

<p>
 <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv"></video>
</p>



<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css">vistazo directamente a la CSS</a> que usa.</p>

<h4 id="El_HTML">El HTML</h4>

<p>El HTML para este ejemplo es muy sencillo:</p>

<pre class="deki-transform">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="runDemo()"&gt;
    &lt;div class="slideRight"&gt;¡Esto es una caja!&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función <code>runDemo()</code> del código JavaScript.</p>

<h4 id="La_CSS">La CSS</h4>

<p>Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> en su totalidad. A continuación se muestran sólo los trozos relevantes:</p>

<pre class="deki-transform">.slideRight {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  background-color: red;
  left: 0%;
  color: black;
}
</pre>

<p>Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.</p>

<p>La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.</p>

<p>Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.</p>

<p>La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.</p>

<p>Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.</p>

<pre class="deki-transform">.slideLeft {
  position: absolute;
  transition-property: background-color, color, left;
  transition-duration: 5s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 5s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 5s;
  text-align: center;
  background-color: blue;
  left: 90%;
  color: white;
  width: 100px;
  height: 100px;
}
</pre>

<p>Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.</p>

<h4 id="El_código_JavaScript">El código JavaScript</h4>

<p>Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.</p>

<div class="note"><strong>Nota:</strong> una vez que <a class="external" href="http://dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/csswg/css3-animations/">la compatibilidad para las animaciones</a> CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.</div>

<p>En primer lugar, la función<code> runDemo()</code> que se llama cuando el documento se carga para inicializar la secuencia de animación:</p>

<pre class="deki-transform">function runDemo() {
  var el = updateTransition();

  // Configurar un controlador de eventos para invertir la dirección
  // cuando finalice la transición.

  el.addEventListener("transitionend", updateTransition, true);
}
</pre>

<p>Es bastante sencillo: llama a la función<code> updateTranslation()</code> que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.</p>

<p>La función <code>updateTransition()</code> tiene este aspecto:</p>

<pre class="deki-transform">function updateTransition() {
  var el = document.querySelector("div.slideLeft");

  if (el) {
    el.className = "slideRight";
  } else {
    el = document.querySelector("div.slideRight");
    el.className = "slideLeft";
  }

  return el;
}
</pre>

<p>Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).</p>

<p>Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.</p>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegadores</th>
   <th>Compatibilidad básica</th>
   <th>Propiedad</th>
   <th>Evento de transición finalizada</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>(ninguna, a partir de IE9 pp7)</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td><strong>4.0</strong> (2.0)</td>
   <td><code>-moz-transition</code></td>
   <td><code>transitionend</code></td>
  </tr>
  <tr>
   <td>Opera</td>
   <td><strong>10.5</strong></td>
   <td><code>-o-transition</code></td>
   <td><code>OTransitionEnd</code></td>
  </tr>
  <tr>
   <td>Safari | Chrome | WebKit</td>
   <td>3.2 | yes | yes</td>
   <td><code>-webkit-transition</code></td>
   <td><code>webkitTransitionEnd</code></td>
  </tr>
 </tbody>
</table>

<h3 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h3>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidad</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Compatibilidad básica</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidad</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Compatibilidad básica</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Consultar_también">Consultar también</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">Módulo de transiciones CSS nivel 3</a></li>
 <li>{{ cssxref("-moz-transition") }}</li>
 <li>{{ cssxref("-moz-transition-property") }}</li>
 <li>{{ cssxref("-moz-transition-duration") }}</li>
 <li>{{ cssxref("-moz-transition-timing-function") }}</li>
 <li>{{ cssxref("-moz-transition-delay") }}</li>
</ul>

<p>{{ HTML5ArticleTOC() }}</p>

<p>{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}</p>