Animaciones con Transition

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

29.  
30.  
33.  
36.  
51.  

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>
← Estilo CSS para definir columnas en una página web
Como usar el estilo transform de CSS →