Propiedad transition-property de CSS
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 inicial | all |
|---|---|
| Se aplica a | Todos los elementos, pseudo-elementos ::before y ::after. |
| Heredado | 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 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>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>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>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>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>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. |
Práctica
¿Cuál afirmación es correcta sobre transition-property?