Como criar animações mais complexas com @keyframes e a propriedade animation
Enquanto as transições animam a mudança entre dois estados, as animações CSS permitem criar sequências com múltiplos passos, repetições e controle mais detalhado do movimento.
Elas funcionam em duas partes: a definição da animação com @keyframes e a aplicação com a propriedade animation.
O @keyframes define os passos da animação. Você dá um nome a ela e descreve o estado do elemento em cada ponto.
Carregando...from equivale a 0% e to equivale a 100%. Você pode adicionar quantos passos intermediários quiser:
Carregando...A propriedade animation conecta o elemento a um @keyframes.
Carregando...Exemplo:
Carregando...Carregando...Carregando...Use transições para mudanças simples entre dois estados, geralmente disparadas por interação do usuário (hover, focus, click). Use animações quando precisar de múltiplos passos, repetição, ou quando a animação deve rodar sem interação do usuário.