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 - Combina backwards e forwards. 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.

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.