HTML & CSS · Capítulo 9
Animação, motion e prefers-reduced-motion
Movimento útil, performante e acessível.
O que precisas de perceber
Anima opacity/transform quando possível. Movimento deve explicar estado, não distrair. Respeita prefers-reduced-motion e nunca escondas conteúdo essencial atrás de animações.
EXEMPLO
Vê o código
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important}}As minhas notas
Escreve apontamentos deste capítulo. Ficam apenas neste dispositivo.
Guardado localmente.Exercício
Cria uma entrada suave de cards com fallback para utilizadores que reduzem movimento.