Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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
Ejercicios KeyFrames
Barra de habilidad
Nota: Para realizar este ejercicio usaremos keyframes, pero no usaremos el estilo transform.
Barra de habilidad con corazones
Animación espiral
Hacer la siguiente animación:
animation-direction
alternate
Empieza la animación por el final
reverse
Debe tener al menos un animation-iteration-count de 2.
animation-direction: reverse;
animation-iteration-count: 2; Delay
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;
}