Módulo 2 / HTML & CSS

Animações e
Transições CSS

Dando vida às interfaces com movimentos suaves e animações.

school Aula 10 schedule 2 horas

Suave

Transition

.botao {
  background: #6366f1;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.botao:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px
    rgba(99, 102, 241, 0.4);
}

Passe o mouse:

Hover

lightbulb transition anima automaticamente qualquer mudança de propriedade CSS.

Detalhes

Propriedades da transition

/* Atalho */
transition: propriedade duração easing delay;

/* Exemplos */
transition: all 0.3s ease;
transition: transform 0.2s ease-out;
transition: opacity 0.5s linear 0.1s;

/* Múltiplas propriedades */
transition:
  background 0.3s ease,
  transform 0.2s ease-out,
  box-shadow 0.3s ease;

tune Cada parte

transition-property Qual propriedade animar (all, transform, opacity...)

transition-duration Quanto tempo dura (0.3s, 200ms, 1s)

transition-timing-function Curva de aceleração (ease, linear, ease-in...)

transition-delay Tempo antes de iniciar (0.1s, 500ms)

Curvas

Timing functions

Passe o mouse para comparar:

linear velocidade constante

ease começa lento, acelera, freia

ease-in começa lento

ease-out termina lento

ease-in-out lento nos dois extremos

transition-timing-function:
  linear
  ease          /* padrão */
  ease-in
  ease-out
  ease-in-out

/* Personalizada com cubic-bezier */
transition-timing-function:
  cubic-bezier(0.68, -0.55, 0.27, 1.55);

lightbulb Use cubic-bezier.com para criar curvas personalizadas.

Transformações

Transform

/* Mover */
transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);

/* Escalar */
transform: scale(1.2);
transform: scaleX(0.5);

/* Girar */
transform: rotate(45deg);

/* Inclinar */
transform: skew(10deg, 5deg);

/* Combinar */
transform: translateY(-5px) scale(1.05);

Demonstrações:

X

translate

S

scale

R

rotate

K

skew

Passe o mouse sobre cada caixa!

info transform e opacity são as propriedades mais performáticas para animar.

Animações complexas

@keyframes

/* Definir a animação */
@keyframes pulsar {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Usar a animação */
.elemento {
  animation: pulsar 2s ease-in-out infinite;
}

P

pulse

S

spin

B

bounce

X

shake

lightbulb Diferente da transition (que precisa de trigger), @keyframes roda automaticamente!

Controle

Propriedades da animation

/* Atalho */
animation: nome duração easing delay
  contagem direção preenchimento;

/* Exemplo completo */
animation: pulsar 2s ease-in-out 0s
  infinite alternate both;

animation-name Nome do @keyframes

animation-duration Tempo (2s, 500ms)

animation-timing-function Curva de velocidade

animation-delay Espera antes de iniciar

animation-iteration-count Repetições (1, 3, infinite)

animation-direction normal, reverse, alternate

animation-fill-mode forwards, backwards, both

Comparação

Transition vs Animation

swap_horiz transition

▸ Precisa de um gatilho (:hover, :focus, JS)
▸ Anima de A para B (dois estados)
▸ Não repete automaticamente
▸ Simples e direto

Ideal para: hover, foco, mudanças de estado

animation animation

▸ Roda automaticamente (sem trigger)
▸ Múltiplos estados com @keyframes
▸ Pode repetir infinitamente
▸ Controle total sobre cada etapa

Ideal para: loaders, atenção, onboarding, decorativo

Boas práticas

Performance

check_circle Anime estas propriedades

transform (translate, scale, rotate)

opacity (transparência)

Usam GPU, não causam reflow.

cancel Evite animar

width / height

margin / padding

top / left

Causam reflow, pesado para o navegador.

lightbulb Use will-change: transform para otimizar. Mas aplique apenas em elementos que realmente serão animados.

Acessibilidade

Respeite o usuário

/* Reduz animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

accessible Alguns usuários têm sensibilidade a movimento. Respeitar essa preferência é fundamental.

checklist Boas práticas de animação

▸ Mantenha durações curtas (0.2s a 0.5s)
▸ Use animações com propósito, não decoração vazia
▸ Anime transform e opacity
▸ Respeite prefers-reduced-motion
▸ Evite flashs e movimentos bruscos

Mão na massa

Exercício prático

edit_note Adicionando vida à sua página

Adicione transition: all 0.3s ease aos botões e links
Crie efeitos de hover nos cards: transform: translateY(-4px) com box-shadow
Crie um @keyframes fade-in com opacidade de 0 a 1 e aplique no carregamento da página
Anime o botão de enviar do formulário com um efeito de escala no :active
Adicione a media query prefers-reduced-motion para acessibilidade

star Bônus: crie um loader (spinning circle) com @keyframes rotate!

Próxima aula

Aula 11

Projeto Prático: Landing page responsiva + Portfólio pessoal.

task_alt O que aprendemos hoje

check_circle Transitions: propriedades, duração e easing
check_circle Timing functions e curvas personalizadas
check_circle Transform: translate, scale, rotate, skew
check_circle @keyframes e propriedades de animation
check_circle Performance e acessibilidade em animações