Curso de HTML | Animaciones con 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);}
}

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

animation-fill-mode: forwards

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

Hacer la siguiente animación:

alternate

Empieza la animación por el final

animation-direction: alternate;

La animación comienza por el estado final.

animation-direction: reverse;

animation-delay:2s;

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

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