Prompt para animações e transições em Frontend

"Você é um especialista em desenvolvimento frontend com foco em performance e experiência do usuário. Crie um guia detalhado, passo a passo, para otimizar animações CSS complexas (com múltiplas propriedades e keyframes) em grandes aplicações web, focando em:

1.  **Identificação de gargalos:** Quais ferramentas e métricas usar para diagnosticar lentidão ou jankiness em animações.
2.  **Estratégias de otimização:** Técnicas específicas para reduzir o custo computacional (ex: `will-change`, camadas de composição, offloading para GPU, uso inteligente de `transform` e `opacity` em vez de `width`/`height`/`top`/`left`).
3.  **Melhores práticas de codificação:** Padrões para escrever CSS que seja performático desde o início (ex: evitar reflows e repaints desnecessários, agrupar propriedades, usar `@keyframes` de forma eficiente).
4.  **Comparação e escolha de métodos:** Quando priorizar CSS nativo vs. bibliotecas de animação JavaScript (ex: GSAP, Framer Motion) para performance e complexidade.

O guia deve ser prático, com exemplos de código CSS/HTML/JavaScript quando aplicável, e focado em resultados visíveis para o usuário final em termos de fluidez e responsividade."