miércoles, 11 de junio de 2014

Otras propiedades de las transiciones



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!







No hay comentarios:

Publicar un comentario en la entrada