☝ Básicamente el uso de la directiva @keyframes
te permite definir el comportamiento de tu animación punto por punto, y cualquier elemento puede usar esta animación por medio de la regla animation-name
.
.
Dentro de @keyframes
especificamos cada punto de nuestra animación por medio de porcentajes, por ejemplo, tomando en cuenta este ejemplo:
.
.
Podríamos tener un @keyframes
de esta forma:
.
@keyframes jump {
/* Punto A */
0% {
}
/* Punto B */
40% {
}
/* Punto C */
60% {
}
/* Punto D */
90% {
}
}
.
Los porcentajes pueden ser los que tú quieras, pero lo más importante a tener en cuenta es que mientras más cerca esté un porcentaje de otro más rápido será la transición de un punto a otro 😄
.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.