Ficha 01 · Animação CSS e performance

Parte I · Verdadeiro ou Falso (30 pts)

Indica V ou F e justifica.

1. Animar transform e opacity é geralmente mais performante do que animar width e left. (5 pts)
2. O requestAnimationFrame é menos suave que o setInterval para animações. (5 pts)
3. O Intersection Observer permite detectar quando um elemento entra no viewport sem ouvir o evento scroll continuamente. (5 pts)
4. O media query prefers-reduced-motion serve para respeitar utilizadores que preferem menos animação. (5 pts)
5. Uma transition em CSS é adequada para animar a mudança entre dois estados (ex: hover). (5 pts)
6. O GSAP só funciona com a propriedade transform. (5 pts)

Parte II · Escrever CSS para uma animação (35 pts)

Implementa as seguintes animações em CSS.

Exercício 1 · Botão com hover (15 pts)

Cria um botão .cta que, ao passar o rato, sobe ligeiramente (2 px), escurece o fundo e mostra uma sombra, tudo com transição suave.

Exercício 2 · Loader com keyframes (20 pts)

Cria um spinner circular .loader que roda continuamente (360°), usando @keyframes.

Parte III · Corrigir animação com problemas de performance (35 pts)

O código seguinte anima um card a deslizar e crescer, mas está "aos saltos" (não chega a 60 fps). Identifica os problemas de performance e reescreve o CSS de forma performante.

.card {
  position: absolute;
  left: 0;
  width: 200px;
  height: 120px;
  transition: left 0.4s, width 0.4s, height 0.4s;
}
.card.activo {
  left: 300px;
  width: 260px;
  height: 160px;
}