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

Hace la animación de ida y vuelta.

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