Compondo Múltiplas Animações
Podemos usar a forma abreviada para especificar todas as propriedades de animação. A sintaxe é a seguinte:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Vamos reescrever as próximas propriedades de forma resumida.
Forma detalhada
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;
Parece confuso, e é fácil esquecer algum valor. No entanto, essa possibilidade existe.
Nota
Para o navegador, não há diferença entre a forma abreviada e a forma detalhada de especificar a animação.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Awesome!
Completion rate improved to 2.04Compondo Múltiplas Animações
Deslize para mostrar o menu
Podemos usar a forma abreviada para especificar todas as propriedades de animação. A sintaxe é a seguinte:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Vamos reescrever as próximas propriedades de forma resumida.
Forma detalhada
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;
Parece confuso, e é fácil esquecer algum valor. No entanto, essa possibilidade existe.
Nota
Para o navegador, não há diferença entre a forma abreviada e a forma detalhada de especificar a animação.
Obrigado pelo seu feedback!
