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 .
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
-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 .
-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
Comentarios
Publicar un comentario