W3docs
es
Iniciar sesión

Propiedad `transition-property` de CSS

How to use the CSS transition-property longhand property to specify a property name for the transition effect. See property values and try examples.

La propiedad transition-property especifica los nombres de las propiedades para la transición. Acepta una lista separada por comas de nombres de propiedades, o la palabra clave all para transicionar todas las propiedades de un elemento.

La propiedad transition-property es una de las propiedades de CSS3.

warning

No todas las propiedades en CSS pueden ser transicionadas.

info

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

Valor inicialall
Se aplica aTodos los elementos, pseudo-elementos ::before y ::after.
HeredadoNo.
AnimableNo (controla qué propiedades se animan, pero no se anima a sí misma).
VersiónCSS3
Sintaxis DOMobject.style.transitionProperty = "height";

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

Sintaxis

Valores de transition-property en CSS

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

Ejemplo de la propiedad transition-property:

Ejemplo de código de transition-property en CSS

<!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 »

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

Otro ejemplo de código de transition-property en CSS

<!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 »

Ejemplo de la propiedad transition-property con un color de fondo transicionado:

Ejemplo de transition-property con color de fondo transicionado:

<!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 transicionados:

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

<!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 »

Ejemplo de la propiedad transition-property con fuente transicionada:

Ejemplo de transition-property en CSS 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

ValorDescripción
noneNo aparecerá ningún efecto de transición.
allEl efecto de transición se aplicará a todas las propiedades.
propertyEspecifica una lista separada por comas de nombres de propiedades CSS para el efecto de transición.
initialEstablece esta propiedad en su valor predeterminado.
inheritHereda esta propiedad de su elemento padre.

Práctica

Práctica

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