Transiciones CSS

Tabla de contenido

Mostrar tabla de contenidos

Transiciones CSS

Las transiciones CSS le permiten cambiar los valores de las propiedades sin problemas, durante un período determinado.

Pase el mouse sobre el elemento siguiente para ver un efecto de transición CSS:

CSS

En este capítulo aprenderá sobre las siguientes propiedades:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Soporte del navegador para transiciones

Los números de la tabla especifican la primera versión del navegador que admite totalmente la propiedad.

Property
transition	26.0	10.0	16.0	6.1	12.1
transition-delay	26.0	10.0	16.0	6.1	12.1
transition-duration	26.0	10.0	16.0	6.1	12.1
transition-property	26.0	10.0	16.0	6.1	12.1
transition-timing-function	26.0	10.0	16.0	6.1	12.1

¿Cómo utilizar las transiciones CSS?

Para crear un efecto de transición, debes especificar dos cosas:

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á ningún efecto, porque el valor predeterminado es 0.

El siguiente ejemplo muestra un elemento <div> rojo de 100px * 100px. El <div> El elemento también ha especificado un efecto de transición para la propiedad de ancho, con una duración de 2 segundos:

Ejemplo

div
{
  width: 100px;
  height: 100px;
  
background: red;
  transition: width 2s;
}

El efecto de transición comenzará cuando la propiedad CSS especificada (ancho) cambie de valor.

Ahora, especifiquemos un nuevo valor para la propiedad de ancho cuando un usuario pasa el mouse sobre el elemento <div>:

Ejemplo

div:hover
{
  width: 300px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>

Tenga en cuenta que cuando el cursor sale del elemento, volverá gradualmente a su estilo original.

Cambiar varios valores de propiedad

El siguiente ejemplo agrega un efecto de transición para las propiedades de ancho y alto, con una duración de 2 segundos para el ancho y 4 segundos para el alto:

Ejemplo

div
{
  transition: width 2s, height 4s;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>

Especificar la curva de velocidad de la transición

La propiedad transition-timing-function especifica la curva de velocidad del efecto de transición.

La propiedad de función de sincronización de transición puede tener los siguientes valores:

ease: - especifica un efecto de transición con un inicio lento, luego rápido y luego final lento (esto es el valor 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 inicio lento
ease-out: - especifica un efecto de transición con un final lento
ease-in-out: - especifica un efecto de transición con un inicio y un final lentos
cubic-bezier(n,n,n,n): - le permite definir sus propios valores en una función cúbica-bezier

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:

Ejemplo

#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;}

Pruébelo usted mismo →

<!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>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</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 de transición.

El siguiente ejemplo tiene un retraso de 1 segundo antes de comenzar:

Ejemplo

div {
  
transition-delay: 1s;
}

Pruébelo usted mismo →

<!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>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Transición + Transformación

El siguiente ejemplo agrega un efecto de transición a la transformación:

Ejemplo

div {
  transition: 
width 2s, height 2s, transform 2s;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>

Más ejemplos de transición

Las propiedades de transición CSS se pueden especificar una por una, así:

Ejemplo

div
{
  transition-property: width;
   
transition-duration: 2s;
   
transition-timing-function: linear;
  transition-delay: 1s;
}

Pruébelo usted mismo →

<!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>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

o usando la propiedad abreviada transition:

Ejemplo

div
{
   
transition: width 2s linear 1s;
}

Pruébelo usted mismo →

<!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>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

Propiedades de transición CSS

La siguiente tabla enumera todas las propiedades de transición CSS:

transition: Una propiedad abreviada para establecer 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 un efecto de transición en completarse
transition-property: Especifica el nombre de la propiedad CSS para la que es el efecto de transición.
transition-timing-function: Especifica la curva de velocidad del efecto de transición.