Gerenciamento de Estados de Animação em CSS
Propriedade animation-fill-mode
É possível controlar os estilos do elemento antes e depois da execução da animação. animation-fill-mode especifica se um elemento deve manter seu estado final da animação ou retornar ao seu estado original.
animation-fill-mode: none | forwards | backwards | both
none- Este é o valor padrão. A animação não afeta a visualização do elemento antes ou depois da animação. O elemento permanecerá igual ao inicial;forwards- Significa que os estilos ao final da animação permanecerão para o elemento, e ele não retornará à sua visualização inicial;backwards- Significa que o elemento terá os estilos especificados no início da animação. Mesmo que a animação seja acionada ao passar o mouse ou tenha algum atraso;both- Combinabackwardseforwards. Significa que, antes da execução da animação, o elemento terá os estilos especificados no início da animação. Após a execução, o elemento terá os estilos definidos no final da animação.
Considere o exemplo a seguir para verificar a diferença entre os valores. Ele foi criado para mostrar que o estado do elemento nunca mudará se aplicarmos o animation-fill-mode com o valor correto. Após executar o código, o estado final dos elementos será imutável. Caso seja necessário ver a animação novamente, recarregue a página.
index.html
index.css
Propriedade animation-play-state
É possível controlar o estado de execução da animação. Ela pode estar pausada ou em execução.
animation-play-state: running | paused
running- Este é o valor padrão. Inicia ou retoma a animação;paused- Interrompe a animação no estado atual.
Considere o exemplo a seguir, onde a animação infinita será interrompida ao passar o cursor sobre o elemento.
index.html
index.css
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 the difference between `animation-fill-mode` values with examples?
How does `animation-play-state` interact with user actions like hover?
Can you provide a practical use case for combining `animation-fill-mode` and `animation-play-state`?
Awesome!
Completion rate improved to 2.04Gerenciamento de Estados de Animação em CSS
Deslize para mostrar o menu
Propriedade animation-fill-mode
É possível controlar os estilos do elemento antes e depois da execução da animação. animation-fill-mode especifica se um elemento deve manter seu estado final da animação ou retornar ao seu estado original.
animation-fill-mode: none | forwards | backwards | both
none- Este é o valor padrão. A animação não afeta a visualização do elemento antes ou depois da animação. O elemento permanecerá igual ao inicial;forwards- Significa que os estilos ao final da animação permanecerão para o elemento, e ele não retornará à sua visualização inicial;backwards- Significa que o elemento terá os estilos especificados no início da animação. Mesmo que a animação seja acionada ao passar o mouse ou tenha algum atraso;both- Combinabackwardseforwards. Significa que, antes da execução da animação, o elemento terá os estilos especificados no início da animação. Após a execução, o elemento terá os estilos definidos no final da animação.
Considere o exemplo a seguir para verificar a diferença entre os valores. Ele foi criado para mostrar que o estado do elemento nunca mudará se aplicarmos o animation-fill-mode com o valor correto. Após executar o código, o estado final dos elementos será imutável. Caso seja necessário ver a animação novamente, recarregue a página.
index.html
index.css
Propriedade animation-play-state
É possível controlar o estado de execução da animação. Ela pode estar pausada ou em execução.
animation-play-state: running | paused
running- Este é o valor padrão. Inicia ou retoma a animação;paused- Interrompe a animação no estado atual.
Considere o exemplo a seguir, onde a animação infinita será interrompida ao passar o cursor sobre o elemento.
index.html
index.css
Obrigado pelo seu feedback!
