La caracteristica de transiciones y rotaciones en CSS3 sirve para hacer paso de efectos y modificaciones de elegancia a nuestro dise~os en nuestras paginas y cada vez mas estas caracteristicas estan tomando mas fuerza, normalmente los navegadores que soportan mas estas caracteristicas son firefox y google-chrome, las practicas que haremos aqui estaran para ambos navegadores.
Transiciones CSS3
Las trancisiones nos ayudan a hacer una ilusion de pausa en el transcurso de un evento en una pagina web mas claro el vivo efecto hover cuando nosotros aplicamos hover a un elemento y pos ejemplo hacemos que al pasar el mouse se cambie el color de fondo, esto pasa de manera INSTANTANEA , se ve bien pero pierde elegancia. Con una transicion podemos hacer que esto no sea instantaneo si no que haya un efecto mas …
A continuacion tenemos un menu de 5 opciones que no tienen ninguna accion especifica pero la usaremos como conejillo de indias. El codigo es :
<html>
<head>
<style>
nav ul {
list-style : none ;
}
nav ul li {
display : inline ;
margin-left : 20px ;
border : 2px black solid ;
background : #aaa ;
padding : 3px ;
}
nav ul li:hover {
background : #00ffee ;
}
</style>
</head>
<body>
<h2>Prueba de Transiciones 1</h2>
<p>Prueba sin Transicion ...</p>
<nav>
<ul>
<li>Inicio</li>
<li>Documentos</li>
<li>Descargas</li>
<li>Servicios</li>
<li>Acerca de ...</li>
</ul>
</nav>
</body>
</html>
Este ejemplo lo podras ver Aqui
Como podemos ver en el ejemplo el paso de color gis a azul se hace al instante pero si queremos que al hacerse este efecto se haga con un retardo de 0.5segundos, en la parte del CSS de la lista que no es el efecto hover agregamos la linea : -webkit-transition : background 0.5s linear o -moz-transition : background 0.5s linear entonces el codigo CSS quedara asi :
nav ul li {
display : inline ;
margin-left : 20px ;
border : 2px black solid ;
background : #aaa ;
padding : 3px ;
-webkit-transition : background 0.5s linear ;
-moz-transition : background 0.5s linear ;
}
Y el resultado de la modificacion la podremos ver Aqui , Aqui podemos notar el retardo de medio segundo al cambiar de opcion.
La estructura de la transicion es :
transition : atributo tiempo tipo
El atributo puede ser cuaquiera que querramos modificar el width , el color , etc … en este caso el background.
El tiempo puede ser cualquiera expresado en segundos [1s , 2s , 3s ] o fracciones [0.2s , 0.3s]
El tipo de la transion hay dos tipos pero por ahora solo recuerdo linear , lo cierto es que no hay mucha diferencia entre los dos , por eso nos quedamos con el linear…
Acontinuacion dejo el siguiente ejemplo aplicando transition a varios atributos, el codigo esta aqui :
<html>
<head>
<style>
div#transwidth {
border : 1px black solid ;
width : 300px ;
-webkit-transition : width 0.5s linear;
-moz-transition : width 0.5s linear;
}
div#transwidth:hover {
width : 600px;
}
div#transheight {
width : 300px ;
height : 200px ;
border : 1px black solid ;
-webkit-transition : height 0.5s linear;
-moz-transition : height 0.5s linear;
}
div#transheight:hover {
height : 400px;
}
div#transfontsize {
width : 400px ;
height : 300px ;
font-size : 16px ;
border : 1px black solid ;
-webkit-transition : font-size 0.5s linear, width 0.5s linear , height 0.5s linear;
-moz-transition : font-size 0.5s linear, width 0.5s linear , height 0.5s linear;
}
div#transfontsize:hover {
font-size : 40px;
width : 800px ;
height : 400px ;
}
</style>
</head>
<body>
<h2>Prueba de Transiciones 1</h2>
<p>Multiples Ejemplos ... <i>Para activar cada ejemplo deberas posicionar el mouse sobre cada caja.</i></p>
<h3>Transicion al Width</h3>
<div id="transwidth">
div#transwidth {<br>
border : 1px black solid ;<br>
width : 300px ;<br>
-webkit-transition : width 0.5s linear;<br>
-moz-transition : width 0.5s linear;<br>
}<br>
div#transwidth:hover {<br>
width : 600px;<br>
}
</div>
<h3>Transicion al Height</h3>
<div id="transheight">
div#transheight {<br>
width : 300px ;<br>
height : 400px ;<br>
border : 1px black solid ;<br>
-webkit-transition : height 0.5s linear;<br>
-moz-transition : height 0.5s linear;<br>
}<br>
div#transheight:hover {<br>
width : 600px;<br>
}
</div>
<h3>Transicion al Font-Size</h3>
<div id="transfontsize">
div#transfontsize {<br>
width : 400px ;<br>
height : 200px ;<br>
font-size : 16px ;<br>
border : 1px black solid ;<br>
-webkit-transition : font-size 0.5s linear, width 0.5s linear , height 0.5s linear;<br>
-moz-transition : font-size 0.5s linear, width 0.5s linear , height 0.5s linear;<br>
}<br>
div#transfontsize:hover {<br>
font-size : 40px;<br>
width : 800px ;<br>
height : 400px ;<br>
}
</div>
</body>
</html>
Y lo puden ver funcionando Aqui
Espero haya quedado claro esto de las transiociones porque nos depara algo mucho mejor…
