A Web: HTML e CSS

✨ Transitions, transforms e animações

Dê vida às suas interfaces: transforme elementos, anime mudanças de estado com transitions e crie movimento com @keyframes, respeitando as preferências de acessibilidade.

O que você vai aprender

Mover, escalar e rotacionar elementos com transform sem afetar o fluxo do documento
Suavizar mudanças de estado (como :hover) com transition, ajustando propriedade, duração e easing
Criar animações por quadros usando @keyframes e a propriedade animation
Respeitar a acessibilidade reduzindo o movimento com prefers-reduced-motion

Lições

transform: mover, escalar e rotacionartranslate, scale e rotate sem afetar o fluxo do documento. transition: animar mudanças de estadoSuaviza as mudanças (p. ex. no :hover): propriedade, duração e easing. @keyframes, animation e prefers-reduced-motionAnimações complexas por quadros, respeitando a acessibilidade.

Pratique este módulo no app

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →