Curso de HTML | Animaciones con Transition

transition I – Sin animación

Sin transición CSS3 | Pablo Monteserín

transition II – Con animación

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

Transición CSS3 | Pablo Monteserín

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.

Transición CSS3, diferentes a la idea y a la vuelta

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

Document

hola

Ejercicio: animar fuentes 2

Ejercicio CSS3 - Animar Fuentes | Pablo Monteserín hola!

Ejercicio: navbar

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

Curso de HTML | Animaciones con Transition 1

navbar en HTML5| Pablo Monteserín

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*/
}

Transition CSS3 | Pablo Monteserín

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;

Transformación CSS3 | Pablo Monteserín

texto

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.

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

Using Target CSS | Pablo Monteserín

link

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accede a tu cuenta

transition I – Sin animación

transition II – Con animación

transition III – Con animación 2

Notas:

Ejercicio: animar fuentes 1

Ejercicio: animar fuentes 2

Ejercicio: navbar

transition III – CSS descompuesto

Nota:

Ejercicio

Target

Texto al que vamos

Footer