Curso de HTML | 36. Animaciones con Transition

transition I – Sin animación

transition II – Con animación

div{	
	background-color: pink;
	width:300px;
	height:300px;
	transition: 3s;
}
	
div:hover{
	background-color: black;
}

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;
}

Ejercicio: animar fuentes 2

Esta es la imagen que he usado en la botonera. Es bueno que tenga transparencia.

div{
    background-color: pink;
    width: 300px;
    transition-property: width, background-color;
    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;
}

div:hover {
    width: 600px;
    background-color: blue;
}

Tener en cuenta que si deseo animar varios estilos, los separaré con comas:

transition:width 2s, height 2s;

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.

El código HTML:

<div class="container">
  <a href="#anchor">link</a>
  <p>Lorem ipsum dolor ...</p>
  <h3 id="anchor">Texto al que vamos</h3>
  <p>Lorem ipsum dolor ...</p>
</div>

El código CSS:

.container {
        width: 600px;
        margin: auto;
}

h3 {
        transition: 1s;
}

:target {
        background-color: red;
}