Animaciones con keyframes

Curso de HTML

6.  
16.  
17.  
23.  
32.  
34.  
36.  
37.  
38.  
40.  
45.  
46.  
47.  
52.  
54.  
56.  
59.  

Contactar con el profesor

Keyframes

div.box1{
	width:300px;
	height:300px;
	background: red;
}
div.box1:hover{
	animation:move 2s;
}
@keyframes move{
	from{transform:rotate(0deg);}
	to{transform:rotate(45deg);}
}

Descompuesto

animation-name:move;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:2; /* infinite para infinitas repeticiones */

Persistir estado final

animation-fill-mode: forwards

Ejercicios KeyFrames

Barra de habilidad

Nota: Para realizar este ejercicio usaremos keyframes, pero no usaremos el estilo transform.

Barra de habilidad con corazones

animation-direction

alternate

Debe tener al menos un animation-iteration-count de 2.

animation-direction: reverse; alternate;

alternate-reverse

Debe tener al menos un animation-iteration-count de 2.

animation-direction: reverse; alternate-reverse;

Delay

animation-delay:2s;

step by step

@keyframes move6{
	0%{transform:translateX(0px);}
	30%{transform: skew(200deg, 200deg);}
	60%{transform: scale(2,2);}
	100%{transform:rotate(1300deg);}
}

pause and play

div{
	background: red;
	width:400px;
	height:400px;
	animation:changeBackground 0.3s ease-in 1s infinite alternate;
	animation-play-state:paused;
}
div:hover{
	animation-play-state:running;	
}

animation-step

Links de interés Animaciones y CSS3

← Menú desplegable con HTML
!important →

Aviso Legal | Política de privacidad