Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
transition I – Sin animación
transition II – Con animación
<style type="text/css">
div{ background-color: pink;width:300px; height:300px; transition: 3s;}
div:hover{background-color: black;}
</style>transition III – Con animación 2
<style type="text/css">
div{
background-color: pink;width:300px; height:300px; transition: 3s;
}
div:hover{
background-color: black;transition: 0.5s;
}
</style>Notas:
El segundo transition define la duración de la animación cuando hago hover, es decir, a la ida, y el primero cuando quito el cursor de encima del elemento, es decir a la vuelta.
Lo normal es utilizar sólo el primer transition y que por tanto la animación a la ida y a la vuelta duren lo mismo.
Ejercicio: animar fuentes
Ejercicio: navbar
transition III – CSS descompuesto
div{
background-color: pink;width:300px; height:300px;
transition-property: width;
transition-duration: 1s;
/*Los tipos de aceleración aceptados son: ease, linear, ease-in, ease-out, ease-in-out*/
transition-timing-function: linear;
}Nota:
Aceleraciones: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(0.42,0,0.58,1).
Ejercicio
Tener en cuenta que si deseo animar varios estilos, los separaré con comas:
transition:width 2s, height 2s;transition V – target
Cuando en el href de un enlace en lugar de poner una url pongo la id de un elemento, esa id sustituirá a :target en la hoja de estilos. No funciona con el class.
<style type="text/css">
.container{
background: pink;
width:300px;
height:300px;
-webkit-transition:all 2s;
}
div:target{
height:600px;
}
</style>
<a href="#left">link</a>
<div id="left" class="container">
</div>