Transition en css3

En este tutorial hablaremos acerca de las transiciones que se pueden hacer con CSS3. Los parámetros que utilizaremos serán:

transition: [propiedades][tiempo][función de tiempo][retardo] ;

El parámetro de propiedades nos permitirá elegir el parámetro que queramos modificar, los mas usuales son width, height, background y border. El más conveniente es utilizar all, que incluye todos los parámetros, como lo habíamos presentado en el tutorial anterior menu scale-all CSS3.

El parámetro de tiempo nos permitirá ver el tiempo de animación en que tardara este en ejecutarse, esta en segundos:

transition-duration: 1s;

El parámetro función de tiempo simplemente una curva de aceleración que se emplea para acelerar o ir mas lento al empezar la animación; algunas funciones son ease, lineal, ease in.

El parámetro retardo define cuan la transición se iniciara.

Para trabajar con este tipo de estilos, necesitamos hover, que nos permitirá ver estos efectos al pasar el cursor encima de ella. Para practicar con estos estilos necesitamos primero declarar los parametros de  tiempo, funcion y retardo, si es necesario las propiedades de cada uno o simplemente podemos poner all, el codigo que se insertara sera el siguiente:

transition-property: all; Este es el parámetro de propiedades

transition-duration: 0.5s; Este es el parámetro de tiempo

transition-timing-function: ease; Este es el parámetro de función

transition-delay: 2s; Este es el parámetro de retardo


Esto quiere decir que la transición comenzara a partir de dos segundos y tambien regresara a su forma normal en dos segundos, el efecto se completara en 0.5 segundos.

Los parámetros de propiedades se declaran de manera normal con un hover, las propiedades que pueden ser modificadas son varias:

background-color
background-image
background-position
border-bottom-color
border-bottom-width
border-color
border-left-color
border-left-width
border-right-color
border-right-width
border-spacing
border-top-color
border-top-width
border-width
bottom
color
font-size
font-weight
height
left
margin-bottom
margin-left
margin-right
margin-top
opacity
padding-bottom
padding-left
padding-right
padding-top
right
text-indent
text-shadow
top
visibility
width
word-spacing
z-index
zoom

Como siempre se ha dicho no hay mejor que la practica para comprender este tipo de estilo; insertamos en nuestro body el siguiente codigo:

<div id="ejemplotransitione">
</div>

Insertamos en nuestra hoja de estilos el siguiente código del que habíamos comentado:

#ejemplotransitione
{
width:100px;
height:50px;
background: #03F;
border-color:#FFFFFF;
border-style:solid;
border-width:2px;
text-shadow:#666666 3px 3px 3px;

transition-duration: 1s;/* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */ /* Safari and Chrome */
-webkit-transition-duration:1s; /* Safari and Chrome *//* Opera */
-o-transition-duration: 1s; /* Opera */
transition-property: all;
-webkit-transition-property:all;
-o-transition-property:all;
-moz-transition-property:all;
transition-delay:1s;
-webkit-transition-delay: 1s;
-o-transition-delay:1s;
-moz-transition-delay:1s;
}

El efecto se visualiza al ingresar el cursor; esto se logra por medio de hover:

#ejemplotransitione:hover
{
width:200px;
border-top-width:50px;
border-right-width:30px;
border-left-width:30px;
border-bottom-width:30px;
background: #0CC;
border-bottom-color: #FF0;
border-left-color:#6F9;
border-right-color: #F90;
border-top-color: #0C9;
font-size:20px 30%;
text-shadow:#F0F 6px 6px 6px;

}

Como vemos en hover se ponen todos los parámetros de todas las propiedades que queramos manipular el efecto que se consigue es el siguiente anteponiendo que en unas versiones de Internet Explorer no soporta este tipo de estilos, por lo que es necesario instalar chrome como navegador:

Ejemplo

Como vemos el efecto comienza a partir de un segundo que se logra por medio del parámetro delay. La transición en que tarda en dar el ciclo completo es de un segundo y las propiedades como habíamos declarado son todas, sin embargo todas nuestras declaraciones de propiedades las hicimos en hover, ahi podemos escribir los parámetros que queramos animar.

A continuación  realizaremos un ejemplo tipo menu en cual emplearemos mas propiedades para ver su funcionamiento:

<div id="solo">

<ul id="menu-transition">

<li id="trasicionuno" ><a href="#">casa</a></li>

<li id="trasiciondos" ><a href="#">Contacto</a></li>

<li id="trasiciontres" ><a href="#">Mensajes</a> </li>

<li id="trasicioncuatro" ><a href="#">Seres</a> </li>

</ul>



</div>

Insertamos en nuestra hoja de estilos:

ul, ol{

list-style:none;

}

#menu-transition li a{
color:#FFFF33;
text-decoration:none;
}

#menu-transition > li{
float:left;
}

#trasicionuno {
margin:0 auto;
width:70px;
height:30px;
background:#C90;
border-color: #fc0;
border-style:solid;
border-width:25px 20px 10px 20px;
box-shadow:inset 1px 1px 20px #963;
-moz-box-shadow:inset 10px 10px 10px #333;
webkit-box-shadow:inset 10px 10px 10px #333;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}

#trasicionuno:hover
{
padding:10px;
}
#trasiciondos {

margin:0 auto;
width:70px;
height:30px;
background:#C90;
border-color: #F93;
border-style:solid;
border-width:10px 20px 25px 20px;
box-shadow:inset 1px 1px 20px #963;
-moz-box-shadow:inset 10px 10px 10px #333;
webkit-box-shadow:inset 10px 10px 10px #333;
transition-duration: 1s;/* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */ /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome *//* Opera */
-o-transition-duration: 1s;
}
#trasiciondos:hover
{
border-width:25px 20px 10px 20px;
background: #C96;
border-color: #FF6;
}


#trasiciontres {
margin:0 auto;
width:70px;
height:30px;
background:#C90;
border-color: #fc0;
border-style:solid;
border-width:25px 20px 10px 20px;
box-shadow:inset 1px 1px 20px #963;
-moz-box-shadow:inset 10px 10px 10px #333;
webkit-box-shadow:inset 10px 10px 10px #333;
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
#trasiciontres:hover{
border-width:15px 10px 10px 10px;
color:#99FF33;
}

#trasicioncuatro {
margin:0 auto;
width:70px;
height:30px;
background:#C90;
border-color: #F93;
border-style:solid;
border-width:10px 20px 25px 20px;
box-shadow:inset 1px 1px 20px #963;
-moz-box-shadow:inset 10px 10px 10px #333;
webkit-box-shadow:inset 10px 10px 10px #333;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}

#trasicioncuatro:hover{
border-width:25px 20px 10px 20px;
background: #C96;
border-color: #FF6;
}

#solo{

width:auto;
height:68px;
background:#C90;
margin-left:-10px;
margin-right:-10px;
}
#menu-transition{
box-shadow: 10px 10px 20px #963;
-moz-box-shadow: 10px 10px 10px #333;
webkit-box-shadow: 10px 10px 10px #333;
}

• casa
• Contacto
• Mensajes
• Seres