Propiedad CSS transition-property

La propiedad CSS transition-property establece qué propiedades de un elemento deben animarse cuando sus valores cambian. Acepta una lista separada por comas de nombres de propiedades, o la palabra clave all para aplicar la transición a todas las propiedades animables del elemento.

Por sí sola, transition-property no hace nada visible — solo nombra los objetivos. También necesitas una transition-duration mayor que 0s para que el cambio sea gradual en lugar de instantáneo. En la mayoría del código se establecen las cuatro partes a la vez con la propiedad abreviada transition; transition-property es la propiedad larga a la que se recurre cuando se quiere controlar el tiempo de cada propiedad por separado.

transition-property es una de las propiedades CSS3.

Qué se puede y qué no se puede animar

Una propiedad es animable solo cuando CSS sabe cómo calcular los valores intermedios entre un valor inicial y un valor final. Como regla general:

Con transición posible: cualquier cosa con un valor numérico o de color — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow, entre otros.
Sin transición posible: valores de palabras clave discretas que no tienen un punto medio significativo — display, position, float, font-family. Cambiar estos se produce de forma instantánea aunque los incluyas en transition-property.

Advertencia

No todas las propiedades en CSS pueden tener transición. Incluir una propiedad no animable (como display) no tiene efecto — el cambio simplemente ocurre de inmediato.

Información

Los prefijos de proveedor (por ejemplo, -webkit-, -moz-, -o-) ya no son necesarios para las transiciones CSS en los navegadores modernos.

Valor inicial	all
Se aplica a	Todos los elementos, pseudoelementos ::before y ::after.
Heredable	No.
Animable	No (controla qué propiedades se animan, pero no se anima a sí misma).
Versión	CSS3
Sintaxis DOM	object.style.transitionProperty = "height";

Nota: En el CSS moderno, se recomienda usar la propiedad abreviada transition en su lugar.

Sintaxis

Valores de CSS transition-property

transition-property: none | all | property | initial | inherit;

Ejemplo de la propiedad transition-property:

Ejemplo de código CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Aquí solo se anima height. Dado que width no está incluida, saltaría instantáneamente si cambiara — lo cual es exactamente la razón por la que importa nombrar las propiedades.

Ejemplo de la propiedad transition-property con ancho y alto animados:

Otro ejemplo de código CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Los dos nombres de propiedades están separados por una coma. También podrías escribir transition-property: all para animar ambos a la vez, pero listarlos explícitamente evita animar accidentalmente propiedades que no tenías la intención de incluir.

Ejemplo de la propiedad transition-property con color de fondo animado:

Ejemplo de transition-property con color de fondo animado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad transition-property con color de fondo y desplazamiento de posición izquierda animados:

Ejemplo de transition-property con color de fondo y desplazamiento de posición izquierda animados

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Observa cómo la lista separada por comas se empareja por posición: la primera propiedad (background-color) usa la primera duración y la primera función de tiempo, mientras que la segunda propiedad (left) usa la segunda de cada una. Este emparejamiento posicional permite que cada propiedad se anime con su propia transition-duration y transition-timing-function — algo que la palabra clave all no puede hacer.

Ejemplo de la propiedad transition-property con fuente animada:

Ejemplo de CSS transition-property con las propiedades letter-spacing, font-size y line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
none	No aparecerá ningún efecto de transición.
all	El efecto de transición se aplicará a todas las propiedades.
property	Especifica una lista separada por comas de nombres de propiedades CSS para el efecto de transición.
initial	Establece esta propiedad en su valor predeterminado.
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

transition-property es una de las cuatro propiedades largas que conforman una transición. Casi siempre se usan juntas:

transition-duration — cuánto dura la animación.
transition-timing-function — la curva de aceleración (ease, linear, cubic-bezier).
transition-delay — cuánto tiempo esperar antes de que comience.
transition — la propiedad abreviada que establece las cuatro en una sola declaración.

Práctica

¿Cuál afirmación es correcta sobre transition-property?

Todas las propiedades en CSS pueden tener transición.Se puede usar el valor 'all'.No puede tener nombres de propiedades separados por comas.