Composición de Múltiples Animaciones
Podemos utilizar la forma abreviada para especificar todas las propiedades de animación. La sintaxis es la siguiente:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Reescribamos brevemente las siguientes propiedades.
Forma extensa
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Forma abreviada
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Puede parecer confuso y es fácil omitir algún valor. Sin embargo, existe esta posibilidad.
Nota
Para el navegador, no hay diferencia entre la forma abreviada y la forma extensa de especificar la animación.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04Composición de Múltiples Animaciones
Desliza para mostrar el menú
Podemos utilizar la forma abreviada para especificar todas las propiedades de animación. La sintaxis es la siguiente:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Reescribamos brevemente las siguientes propiedades.
Forma extensa
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Forma abreviada
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Puede parecer confuso y es fácil omitir algún valor. Sin embargo, existe esta posibilidad.
Nota
Para el navegador, no hay diferencia entre la forma abreviada y la forma extensa de especificar la animación.
¡Gracias por tus comentarios!
