📊 Capítulo 18: Animações com Keyframes

Módulo 04: HTML5 e CSS3 Moderno

🗺️ O Motor de Keyframes

flowchart LR
    KEY["1. @keyframes\n(0% a 100% ou from/to)"] --> PROPS["2. Controles\n(fill-mode, alternate, play-state)"] --> UX["3. Padrões de UX\n(Skeleton Shimmer, Spinners)"]

    style KEY fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style PROPS fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style UX fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px

🎯 Slide 1: Sintaxe de @keyframes

• Múltiplos Estados: Defina quadros intermediários em 0%, 25%, 50%, 100%.

• Shorthand: animation: nome 1.5s ease-in-out infinite;.

🎯 Slide 2: Propriedades Cruciais

• animation-fill-mode: forwards: Retém os estilos calculados no último frame ($100\%$) ao terminar.

• animation-direction: alternate: Faz a animação ir e voltar suavemente em ciclo contínuo.

🎯 Slide 3: Skeleton Screens e Acessibilidade

• Shimmer: Animar a posição do gradiente reduz o estresse do tempo de espera do usuário.

• prefers-reduced-motion: Obrigatório por acessibilidade para usuários com sensibilidade vestibular.