O que são Animações CSS?
Animações CSS permitem animar elementos HTML sem JavaScript. Elas usam regras @keyframes para definir estados de animação e a propriedade abreviada animation para controlar temporização, duração e iteração. Animações CSS são aceleradas por GPU e têm bom desempenho para transições, efeitos de hover e indicadores de carregamento.
Propriedades de Animação
- animation-name: Referencia uma regra
@keyframes. - animation-duration: Quanto tempo dura um ciclo (ex.: 1s, 500ms).
- animation-timing-function: Curva de velocidade (ease, linear, ease-in-out, etc.).
- animation-iteration-count: Número de vezes que a animação repete (número ou
infinite).
Perguntas Frequentes
Animações CSS são melhores que animações JavaScript?
Para transições simples e efeitos decorativos, animações CSS são geralmente mais performáticas porque podem ser processadas pela GPU. Animações JavaScript oferecem mais controle para sequências complexas, interativas ou baseadas em física.
Posso combinar múltiplas animações em um elemento?
Sim. Separe múltiplos valores de animação com vírgulas na propriedade animation. Cada animação pode ter seus próprios keyframes, duração e função de temporização.