Otras propiedades de las transiciones

Regresar al índice

1. El movimiento

La propiedad transition-timing-function permite definir el movimiento de la transición. Esta admite seis valores representados con palabras clave: 

• ease: la transición es lenta al principio y luego se acelera cuando va a terminar (es el valor predeterminado). 
• linear: la transición mantiene una velocidad constante. 
• ease-in: la transición se lleva a cabo lentamente al principio y luego se acelera, cuando va a terminar. 
• ease-out: la transición se lleva a cabo rápidamente al principio y luego disminuye su velocidad, cuando va a terminar. 
• ease-in-out: la transición se lleva a cabo lentamente al principio, luego se acelera, y vuelve a disminuir la velocidad cuando va a terminar. 
• cubic-bezier: le permite configurar su propia curva de Bézier para definir el movimiento.

Estas son las curvas de Bézier utilizadas para esos efectos cinéticos:

Fuente de los gráficos (bloc francés): http://www.felix-girault.fr/blog/css/les-transitions-css3/

Esta es la sintaxis que vamos a usar :

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition-property: left;

-moz-transition-duration: 2s;

-moz-transition-timing-function: ease-in;

-webkit-transition-property: left;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

-o-transition-property: left;

-o-transition-duration: 2s;

-o-transition-timing-function: ease-in;

transition-property: left;

transition-duration: 2s;

transition-timing-function: ease-in;

}

2. El inicio de la transición

La propiedad transition-delay permite definir cuándo se iniciará la transición, cuánto tiempo después de la detección del evento.

Esta sintaxis hace que la transición se inicie 2 segundos después de que se detecte el evento: transition-delay: 2s;.

Esta sería la sintaxis completa:

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition-property: left;

-moz-transition-duration: 2s;

-moz-transition-timing-function: ease-in;

-moz-transition-delay: 2s;

-webkit-transition-property: left;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

-webkit-transition-delay: 2s;

-o-transition-property: left;

-o-transition-duration: 2s;

-o-transition-timing-function: ease-in;

-o-transition-delay: 2s;

transition-property: left;

transition-duration: 2s;

transition-timing-function: ease-in;

transition-delay: 2s;

}

3. La sintaxis abreviada

Puede usar la sintaxis abreviada transition indicando a continuación las funciones separadas con un espacio simple, en este orden : 

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

Veamos un ejemplo de sintaxis abreviada:

#desplazamiento {

position: absolute;

left: 20px;

top: 20px;

-moz-transition: left 2s ease-in 2s;

-webkit-transition: left 2s ease-in 2s;

-o-transition: left 2s ease-in 2s;

transition: left 2s ease-in 2s;

}

4. Las transiciones múltiples

Usted también puede aplicar varias transiciones. Simplemente deberá separar cada transición con una coma e indicar el plazo para que cada transición comience en el momento oportuno.

Vamos a crear una transición múltiple con tres propiedades modificadas: 

• el ancho width, que dura 3 segundos. 
• la altura height, que dura 2 segundos y comienza 3 segundos más tarde. 
• la opacidad opacity, que dura 4 segundos y comienza 6 segundos más tarde.

Vamos a trabajar a partir de una caja <div> que contiene, simplemente, un párrafo de texto.

Estos son los estilos CSS:

p.texto {

color: white;

font-weight: bold;

text-align: center;

line-height: 30px;

}

#multiple {

position: absolute;

left: 20px;

top: 20px;

width: 200px;

height: 60px;

background-color: darkblue;

-moz-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

-webkit-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

-o-transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

transition: width 3s linear, height 2s linear 3s,

opacity 4s linear 6s;

}

#multiple:hover {

width: 400px;

height: 120px;

opacity: .3;

}

Este es el código de la caja <div>:

<div id="multiple">

<p class="texto">Aenean eu leo quam.</p>

</div>

Así se verá en la pantalla:

El cursor no se encuentra sobre la caja <div>, no se ha detectado ningún evento, no pasa nada:

El cursor se encuentra encima (:hover) de la caja <div>, el ancho (property) se modifica durante 3 segundos (duration):

Luego, 3 segundos más tarde (delay), la altura de la caja (property) aumenta durante 2 segundos (duration):

Para terminar, 6 segundos más tarde (delay), se reduce la opacidad de la caja (property) durante 4 segundos (duration):

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear