CSS3 Ya

Concepto
Ejemplo
Vista Previa

Transiciones (funciones de transición)

Un tercer parámetro opcional de la propiedad transition es indicar una "función de transición" que nos permite seleccionar la velocidad durante la transición:

Elemento {
      transition: [nombre de propiedad] [duración de la transición] [función de transición];
}

Los valores posibles que podemos especificar son:

ease : Define un efecto de transición con un comienzo lento, luego rápido y finalmente termina lento (cuando no definimos la función de transición elige esta por defecto)
linear : Define un efecto de transición con la misma velocidad de inicio a fin.
ease-in : Define un efecto de transición con un comienzo lento.
ease-out : Define un efecto de transición con un final lento.
ease-in-out : Define un efecto de transición con un comienzo lento y un final lento.

La sintaxis luego si queremos aplicar la función de transición linear será:

#recuadro2{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s linear;
  -moz-transition:width 2s linear;
  -ms-transition:width 2s linear;
  -webkit-transition:width 2s linear;
  -o-transition:width 2s linear;
}

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba</title>

#recuadro1{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s ease;
  -moz-transition:width 2s ease;
  -ms-transition:width 2s ease;
  -webkit-transition:width 2s ease;
  -o-transition:width 2s ease;
}

#recuadro1:hover{
  width:300px;
}

#recuadro2{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s linear;
  -moz-transition:width 2s linear;
  -ms-transition:width 2s linear;
  -webkit-transition:width 2s linear;
  -o-transition:width 2s linear;
}

#recuadro2:hover{
  width:300px;
}

#recuadro3{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s ease-in;
  -moz-transition:width 2s ease-in;
  -ms-transition:width 2s ease-in;
  -webkit-transition:width 2s ease-in;
  -o-transition:width 2s ease-in;
}

#recuadro3:hover{
  width:300px;
}

#recuadro4{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s ease-out;
  -moz-transition:width 2s ease-out;
  -ms-transition:width 2s ease-out;
  -webkit-transition:width 2s ease-out;
  -o-transition:width 2s ease-out;
}

#recuadro4:hover{
  width:300px;
}

#recuadro5{
  margin: 5px;
  border-radius: 20px;  
  background-color:#eee;
  width:200px;
  padding:10px;
  transition:width 2s ease-in-out;
  -moz-transition:width 2s ease-in-out;
  -ms-transition:width 2s ease-in-out;
  -webkit-transition:width 2s ease-in-out;
  -o-transition:width 2s ease-in-out;
}

#recuadro5:hover{
  width:300px;
}

body {
  background:white;
  margin:50px;
}

</style>

</head> 
<body>

<div id="recuadro1"> 
<h3>ease</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

<div id="recuadro2"> 
<h3>linear</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

<div id="recuadro3"> 
<h3>ease-in</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

<div id="recuadro4"> 
<h3>ease-out</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

<div id="recuadro5"> 
<h3>ease-in-out</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

</body> 
</html>

Transiciones (funciones de transición)

Retornar