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:
Animar un gradiente
- Debemos definir un background específico, mayor que el valor por defecto:
background-size: 200% 200%;
- Definiremos la animación usando @keyframes:
@keyframes gradientAnimation
animation-direction
alternate
reverse
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;
}
animation-step
Links de interés Animaciones y CSS3
- Animate.css (para que funcione bien, mejor descargar la librería para usarla)
- Magic
- Animatable
- Css Animate
- Lea Verou: http://lea.verou.me/projects/
- Codepen: http://codepen.io/pen/
- CSS3Maker: http://www.css3maker.com