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

• Debemos definir un background específico, mayor que el valor por defecto:

background-size: 200% 200%;

• Definiremos la animación usando @keyframes:

@keyframes gradientAnimation

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

animation-direction: reverse; alternate;

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

animation-direction: reverse; alternate-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;	
}