--- title: CSS Transitions slug: Web/CSS/CSS_Transitions tags: - CSS - Experimental - Referencia - Transiciones CSS - Vista general translation_of: Web/CSS/CSS_Transitions --- <div>{{CSSRef}}{{SeeCompatTable}}</div> <p><strong>Transiciones CSS </strong>es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.</p> <h2 id="Referencia">Referencia</h2> <h3 id="Propiedades">Propiedades</h3> <div class="index"> <ul> <li>{{cssxref("transition")}}</li> <li>{{cssxref("transition-delay")}}</li> <li>{{cssxref("transition-duration")}}</li> <li>{{cssxref("transition-property")}}</li> <li>{{cssxref("transition-timing-function")}}</li> </ul> </div> <h2 id="Guías">Guías</h2> <dl> <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt> <dd>Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.</dd> </dl> <h2 id="Especificaciones">Especificaciones</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Especificación</th> <th scope="col">Estado</th> <th scope="col">Comentario</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Transitions')}}</td> <td>{{Spec2('CSS3 Transitions')}}</td> <td>Definición Inicial</td> </tr> </tbody> </table> <h2 id="Ver_además">Ver además</h2> <ul> <li>Transiciones relacionadas, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> pueden producir animaciones independientemente de los cambios en los valores.</li> </ul>