Propiedad CSS transition

La propiedad CSS transition permite animar el cambio del valor de una propiedad a lo largo del tiempo, en lugar de que ocurra de forma instantánea. Cuando el valor de una propiedad animable cambia — por ejemplo porque el usuario pasa el cursor sobre un elemento o se alterna una clase con JavaScript — transition hace que el navegador interpole suavemente del valor anterior al nuevo, dándote efectos de fundido, deslizamiento, crecimiento y cambio de color sin necesidad de un bucle de animación en JavaScript.

transition es una propiedad abreviada que establece cuatro propiedades largas a la vez:

transition-property — qué propiedad animar (p. ej. width, opacity, all).
transition-duration — cuánto tiempo dura la transición (p. ej. 2s, 300ms).
transition-timing-function — la curva de ritmo (p. ej. ease, linear, cubic-bezier(...)).
transition-delay — cuánto tiempo esperar antes de que comience.

La propiedad transition es una de las propiedades CSS3.

Cómo se lee la propiedad abreviada

Una transición individual se escribe así:

transition: <property> <duration> <timing-function> <delay>;

Solo transition-property y transition-duration son imprescindibles para obtener un efecto visible; la función de temporización tiene como valor predeterminado ease y el retardo 0s.

/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;

/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;

El primer valor de tiempo que lee el analizador siempre es la duración; el segundo es el retardo. Por tanto, transition: opacity 1s 2s significa duración 1s, retardo 2s — no al revés.

Advertencia

Si omites la duración, su valor predeterminado es 0s, y una transición de 0s es instantánea — el efecto simplemente no se anima. Siempre proporciona una duración.

Animar varias propiedades

Para hacer la transición de más de una propiedad, separa cada conjunto con una coma. Cada propiedad puede tener su propia duración, función de temporización y retardo:

.box {
  transition: left 1s ease-in-out,
              background-color 1s ease-out 1s;
}

También puedes usar la palabra clave all para aplicar la transición a todas las propiedades animables que cambien, aunque listar las propiedades explícitamente suele ser más eficiente y predecible.

transition: all 0.3s ease;

Información

El valor none es válido y deshabilita las transiciones para las propiedades especificadas.

Activar una transición

Una transición no hace nada por sí sola — solo se ejecuta cuando una propiedad animable cambia entre dos estados. Los activadores más comunes son:

Pseudoclases como :hover, :focus o :active.
Alternar una clase con JavaScript (element.classList.toggle('open')).
Cambios de estilo en línea desde script (element.style.opacity = 0).

Define la transición en el estado base (reposo) del elemento, no en la regla :hover. De este modo, la animación se reproduce tanto cuando el estado se activa como cuando se desactiva.

Información

Los prefijos de proveedor como -webkit-, -moz- y -o- son obsoletos y generalmente no se requieren en los navegadores modernos.

Initial Value	all 0s ease 0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.transition = "all 3s";

Sintaxis

Sintaxis de la propiedad CSS transition

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Ejemplo de la propiedad transition con la pseudoclase :active:

Ejemplo de la propiedad CSS transition

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #8ebf42;
        transition: width 2s;
      }
      div:active {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <p>Click and hold to see the transition effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad transition con la pseudoclase :hover:

Ejemplo de la propiedad CSS transition con la pseudoclase :hover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
        padding: 20px;
        width: 50px;
        height: 50px;
        left: 0;
        background-color: #8ebf42;
        position: relative;
        transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
        left: 400px;
        background-color: #1c87c9;
      }
      .element-2 {
        transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Transition property example</h2>
    <div class="example">
      <p>Hover over the container to see the transition effect.</p>
      <div class="element element-1"></div>
      <p>No transition:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Bueno saber

Solo las propiedades animables realizan la transición. Las propiedades numéricas y de color (width, opacity, color, transform) se animan; propiedades como display o font-family cambian de forma instantánea.
Evita los valores auto. Una transición entre un valor fijo y height: auto no se animará, porque el navegador no puede calcular los tamaños intermedios. Usa max-height o transform: scaleY() en su lugar.
Rendimiento. transform y opacity son las propiedades más económicas de animar porque no activan el layout ni la pintura. Dales preferencia sobre animar left/top o width/height cuando sea posible.
Transiciones vs. animaciones. Usa transition para cambios de estado simples de A a B; recurre a animation con @keyframes cuando necesites bucles, múltiples pasos o movimiento que comience por sí solo.

Valores

Valor	Descripción
transition-property	Especifica los nombres de las propiedades para la transición.
transition-duration	Especifica la duración de la animación de transición.
transition-timing-function	Especifica la velocidad a lo largo del tiempo de un objeto que pasa de un valor a otro.
transition-delay	Especifica el tiempo de espera antes de que se anime el efecto de transición.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué propiedades de CSS Transition se pueden modificar?

Duración de la transiciónFunción de temporización de la transiciónRetardo en el inicio de la transiciónColor de la transiciónOpacidad de la transición