Las transiciones CSS te permiten cambiar los valores de propiedad sin problemas, durante un período determinado. En este capítulo miraremos las siguientes propiedades:
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Como usar transiciones CSS
Para generar una transición debemos seguir dos pasos:
- la propiedad CSS a la que desea agregar un efecto
- la duración del efecto
Nota: Si no se especifica la parte de duración, la transición no tendrá efecto, porque el valor predeterminado es 0.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
color: yellow;
background: red;
transition: width 2s;
text-align: center;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad transition</h1>
<p>
Pasa el cursor sobre el elemento div a continuación para ver el efecto de
transición:
</p>
<div>Hola que tal</div>
</body>
</html>
Cambiar varios valores de propiedad
El siguiente ejemplo agrega un efecto de transición tanto para la propiedad width como para height, con una duración de 2 segundos para el ancho y 4 segundos para el alto:
div {
transition: width 2s, height 4s;
}Especificar la curva de velocidad de la transición
La propiedad transition-timing-function especifica la curva de velocidad de la transición. Esta propiedad puede tener los siguientes valores:
- ease: especifica un efecto de transición con un comienzo lento, luego rápido, luego termina lentamente (esto es predeterminado)
- linear: especifica un efecto de transición con la misma velocidad de principio a fin
- ease-in: especifica un efecto de transición con un comienzo lento
- ease-out: especifica un efecto de transición con un final lento
- ease-in-out: especifica un efecto de transición con un comienzo y un final lentos
- cubic-bezier(n,n,n,n): te permite definir sus propios valores en una función cubic-bezier
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad transition-timing-function</h1>
<p>
Pasa el cursor sobre los elementos div a continuación para ver las
diferentes curvas de velocidad:
</p>
<div id="div1">linear</div>
<br />
<div id="div2">ease</div>
<br />
<div id="div3">ease-in</div>
<br />
<div id="div4">ease-out</div>
<br />
<div id="div5">ease-in-out</div>
<br />
</body>
</html>
Retrasar el efecto de transición
La propiedad transition-delay especifica un retraso en segundos para el efecto. El siguiente ejemplo tiene un segundo de retraso en la transición.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad transition-delay</h1>
<p>Pasa el cursor sobre el elemento div:</p>
<div></div>
<p>
<b>Nota:</b> El efecto de transición tiene un retraso de 1 segundo antes
de comenzar.
</p>
</body>
</html>
transition + transform
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
color: yellow;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>transition + transform</h1>
<p>Situa el cursor sobre el elemento div</p>
<div>Hola</div>
</body>
</html>
Las propiedades de transición CSS se pueden especificar una por una, así.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Las propiedades de transition especificadas una por una</h1>
<p>Haz clic sobre div para ver el efecto:</p>
<div></div>
<p>
<b>Note:</b> El efecto de transition tiene un retardo de 1 segundo antes
de comenzar.
</p>
</body>
</html>
O usando la forma abreviada de la propiedad transition
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Usando la forma corta para la propiedad transition</h1>
<p>Situa el cursor sobre el elemento div para ver el efecto:</p>
<div></div>
<p><b>Note:</b> El efecto tiene un retraso de 1s antes de comenzar.</p>
</body>
</html>
Resumen
| Propiedad | Descripción |
|---|---|
| transition | Una propiedad abreviada para configurar las cuatro propiedades de transición en una sola propiedad |
| transition-delay | Especifica un retraso (en segundos) para el efecto de transición |
| transition-duration | Especifica cuántos segundos o milisegundos tarda en completarse un efecto de transición |
| transition-property | Especifica el nombre de la propiedad CSS para el efecto de transición |
| transition-timing-function | Especifica la curva de velocidad del efecto de transición. |