Estas propiedades son de las más fáciles 👀. Simplemente debes decirle cuánto va a durar la animación y cuántas veces se va a repetir esa animación, es todo 👀. Únicamente con esas dos propiedades ya tienes suficiente paa que una animación empiece a correr 😄
.
Otro ejemplo de animación sencillo, además de el de la clase, podría ser el lanzamiento de algún objeto:
Cuando lanzamos un objeto es normal que a veces gire y se eleve un poco en el aire, para hacer una animación similar, solo necesitariamos 3 puntos:
Punto A: El inicio de la animación, el objeto tendrá un left
inicial y un transform
inicial:
0% {
left: 50px;
transform: rotate(0deg);
}
Punto B: A la mitad de la animación el objeto debió elevarse un poco, por tanto le cambiamos su propiedad en bottom
:
50% {
bottom: 60%;
}
Punto C: Al final de la animación el objeto debió caer y debió de haber dado unas cuantas vueltas, también debió de haberse movido, por lo que modificamos las propiedades left
y transform
, el bottom
no lo modificamos porque por defecto volverá a su estado inicial:
100% {
left: 1080px;
transform: rotate(360deg);
}
Al final nuestro Keyframe podría quedar así y esto simularía un objeto que es lanzado 👀.
@keyframes throw {
0% {
left: 50px;
transform: rotate(0deg);
}
50% {
bottom: 60%;
}
100% {
left: 1080px;
transform: rotate(360deg);
}
}
Obviamente necesitariamos tener un objeto al cual aplicarle la animación, este objeto debe tener un position: absolute;
con respecto al contenedor padre, ya hice la tarea, así que pueden ver el código completo de esta animación aquí 👇👀.
.
Animación del lanzamiento de un objeto
.
Casi todos son estilos para que se vea más bonito y para preparar los elementos en su posición incial, pero el proceso de animado te lo acabo de explicar aquí 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?