Ejemplo practico. Transition-duration,timing-function. CSS3




Con css3  podemos crear  buenos efectos  lo todo es conocer como, hay miles de formas y  aquí dejo dos......... espero sea de utilidad !.

Transition-duration

<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:#3333ff;
transition-property:width,height,background-color;
transition-duration:2s;
-moz-transition-property:width,height,background-color;
-moz-transition-duration:2s;
-webkit-transition-property:width,height,background-color;
-webkit-transition-duration:2s;
-o-transition-property:width,height,background-color;
-o-transition-duration:2s;


}
div:hover{
width:300px;
height:200px;
background-color:#cecece;
}

</style>
</head>
<body>

<div>Hola </div>
</body>
</html>

al usar el   css3  veras algo como esto .

al situarme sobre el .





se agrandara y cambiara de color. de retorno  se ara pequeño quedando en la  imagen de la que partió .


en color


background-color:#3333ff;

se  crea una transition con un tiempo de 2 segundos.

transition-property:width,height,background-color;
transition-duration:2s;


Cambio de tamaño y de color. 


div:hover{
width:300px;
height:200px;
background-color:#cecece;
}






dándole la  compatibilidad a  mozilla.



-moz-transition-property:width,height,background-color;
-moz-transition-duration:2s;




chrome y safari .


-webkit-transition-property:width,height,background-color;
-webkit-transition-duration:2s;

opera

-o-transition-property:width,height,background-color;
-o-transition-duration:2s;

consigo un efecto de movimiento ampliado y cambio de color al situarme sobre el .




listo esto  vemos otro .


transition-timing-function.



<html>
<head>
<style type="text/css">

#sample1{
width:300px;
background-color:#ff6699;
text-align:center;
}
#sample2{

color:#dc143c;
font-family:"Time New Roman",serif;
font-weight:bold;
font-size:80px;
opacity:0.0;
transition-property:opacity;
transition-duration:3s;
transition-timing-function:ease-in-out;

-moz-transition-property:opacity;
-moz-transition-duration:3s;
-moz-transition-timing-function:ease-in-out;

-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
-webkit-transition-timing-function:ease-in-out;


-o-transition-property:opacity;
-o-transition-duration:3s;
-o-transition-timing-function:ease-in-out;


}

#sample2:hover{
opacity:1.0;
}


</style>


</head>



<body>
<div id="sample1"><div id="sample2">HELLO</div></div>



</body>


</html>



Sus cambios serán estos.




         



Lo mismo que en la anterior  con la diferencia de 


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

Es la sincronización de opacidad  que  al situarme sobre el  ira apareciendo el texto hasta volverse solido
este es un buen efecto .



Tambien .
Manifiesto html5