Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
transition III – Con animación 2
div{
background-color: pink;
width:300px;
height:300px;
transition: 3s;
}
div:hover{
background-color: black;
transition: 0.5s;
}
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 1
Para resolver este ejecicio debemos detectar el hover sobre un elemento diferente del que queremos animar:
p:hover span{
transition: 2s;
}
p:hover .h{
font-size: 3rem;
}
transition III – CSS descompuesto
div{
background-color: pink;
width:300px;
height:300px;
transition-property: width, height;
transition-duration: 1s, 5s;
/*Los tipos de aceleración aceptados son: ease, linear, ease-in, ease-out, ease-in-out*/
transition-timing-function: linear, ease-in;
/* Las 3 líneas de código anteriores equivalen a la siguiente:
transition: width: 1s linear, height 5s ease-in*/
}
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;
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.
Esto puede ser interesante en una página en la que al pulsar sobre enlaces se hace un scroll a una sección de la página, para animar el título o elemento que hemos utilizado como ancla para hacer la redirección. De esta forma podemos resaltar la sección a la que hemos hecho scroll.