Módulo 04: HTML5 e CSS3 Moderno • Bloco 5: Animações, Performance & Boas Práticas

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    KEYFRAMES["Animações Complexas com @keyframes"]
    KEYFRAMES --> SYNTAX["1. Sintaxe de Quadros-Chave\n(@keyframes nome, porcentagens 0% a 100%, animation shorthand)"]
    KEYFRAMES --> CONTROLS["2. Propriedades de Controle Fino\n(animation-fill-mode, iteration-count, direction, play-state)"]
    KEYFRAMES --> SKELETON["3. Padrões de UI: Skeleton Screens & Pulse\n(Shimmer Effect, Loading Spinners, Micro-interações)"]

    style KEYFRAMES fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SYNTAX fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style CONTROLS fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style SKELETON fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px

🎬 1. Sintaxe dos @keyframes e o Shorthand animation

  • Definição de Quadros-Chave: 
    @keyframes pulsar-brilho {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}
  • O Shorthand animation: \(\text{animation: [nome] [duração] [timing-function] [delay] [iteration-count] [direction] [fill-mode];\) 
    .badge-pulse {
  animation: pulsar-brilho 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

🎛️ 2. Controle Fino de Execução

  • animation-fill-mode:
    • none: O elemento volta ao estado original antes e depois da animação.
    • forwards: O elemento retém os estilos computados no último frame ($100\%$) ao terminar.
    • backwards: Aplica os estilos do primeiro frame ($0\%$) durante o período de animation-delay.
    • both: Aplica backwards e forwards simultaneamente.
  • animation-direction: normal, reverse, alternate (vai e volta suavemente), alternate-reverse.
  • animation-play-state: paused | running: Pausa ou retoma a animação (ex.: pausar ao passar o mouse com :hover).

💀 3. Padrão de UX Moderno: Skeleton Screen com Efeito Shimmer

O Skeleton Screen reduz a percepção de tempo de espera do usuário substituindo spinners por silhuetas com gradiente em movimento (Shimmer):

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-box {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

🔗 Recursos Pedagógicos do Capítulo 18

Recurso Didático Finalidade Link de Acesso
📊 Slides de Aula Apresentação visual interativa com keyframes, fill-modes e Skeleton Screens Ver Slides
🧠 Quiz Formativo Teste de fixação com feedback imediato por alternativa Fazer Quiz
💻 Exemplos de Código Demonstração prática de Skeleton Loading Shimmer e Spinner CSS Ver Exemplos
🧩 Exercícios em 4 Níveis Lista progressiva com gabarito oficial colapsável Resolver Exercícios
⬅️ Capítulo Anterior Sumário do Módulo Próximo Capítulo ➡️