GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Transiciones en CSS
Las transiciones CSS permiten cambiar los valores de propiedad sin problemas (de un valor a otro),
durante un período determinado.

Cómo utilizar las transiciones CSS

Para crear un efecto de transición, debe especificar dos cosas:
 la propiedad CSS a la que desea añadir un efecto
 la duración del efecto

Nota: Si no se especifica la duración, la transición no tendrá ningún efecto, ya que el valor por
defecto es 0.

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

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
div:hover {
width: 300px;
}

Ver: Código 297.html

Cambiar varios valores de propiedad

El siguiente ejemplo añade un efecto de transición tanto para el ancho y la propiedad de altura,
con una duración de 2 segundos para la anchura y 4 segundos para la altura:

div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}

Ver: Código 298.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

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 transition-timing-function puede tener los siguientes valores:

 ease - especifica un efecto de transición con un comienzo lento, luego rápido, y luego
terminar lentamente (esto es por defecto).
 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 fin lento.
 cubic-bezier(n,n,n,n) - le permite definir sus propios valores de una función
cúbica-Bezier.

El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que pueden ser
utilizados:

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

Ver: Código 299.html

Retrasar el efecto de transición

La propiedad transition-delay especifica un retardo (en segundos) para el efecto de
transición.

El siguiente ejemplo tiene un retardo de 1 segundo antes de partida:

div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}

Ver: Código 300.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Transición + Transformación
El ejemplo siguiente también añade una transformación para el efecto de transición:

div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*Safari*/
transition: width 2s, height 2s, transform 2s;
}

Ver: Código 301.html

Más ejemplos de transición

Las propiedades de transición CSS se pueden especificar uno por uno, como este:

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

Ver: Código 302.html

o mediante el uso de la propiedad rápida transition:

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

Ver: Código 303.html