Modulo 2.2 - CSS Animations Nativo

🎨 Fundamentos de CSS Animation

As CSS Animations permitem criar animacoes complexas usando apenas CSS, definindo etapas intermediarias atraves de @keyframes. E uma forma poderosa e performatica de adicionar movimento as suas interfaces.

🎯 Propriedades Fundamentais

• @keyframes: Define as etapas da animacao (from/to ou percentuais)
• animation-name: Nome da animacao definida em @keyframes
• animation-duration: Duracao da animacao (ex: 0.3s, 500ms)
• animation-timing-function: Curva de velocidade (ease, linear, etc)
• animation-delay: Tempo de espera antes de iniciar
• animation-iteration-count: Quantas vezes repete (numero ou infinite)
• animation-direction: Direcao (normal, reverse, alternate)

📝 Exemplo: Animacao fadeIn

/* Definindo os keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplicando a animacao */
.elemento {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Shorthand (forma curta) */
.elemento {
  animation: fadeIn 0.5s ease-out forwards;
}

⏱️ Timing Functions

As timing functions controlam a velocidade da animacao ao longo do tempo. Escolher a curva certa pode fazer a diferenca entre uma animacao mecanica e uma que parece natural e fluida.

linear

Velocidade constante do inicio ao fim. Bom para loaders rotativos.

ease

Inicio lento, acelera, termina lento. Padrao do navegador.

ease-in

Comeca devagar e acelera. Bom para elementos saindo da tela.

ease-out

Comeca rapido e desacelera. Ideal para elementos entrando.

ease-in-out

Lento no inicio e fim. Otimo para transicoes de estado.

cubic-bezier()

Curva personalizada. Ex: cubic-bezier(0.68, -0.55, 0.27, 1.55)

💡 Dica Pro

Use ease-out para elementos entrando na tela e ease-in para elementos saindo. Para bounce effects, use cubic-bezier com valores maiores que 1. Ferramenta util: cubic-bezier.com

🔄 Transitions vs Animations

Entender quando usar transition e quando usar animation e fundamental para criar interfaces eficientes. Cada uma tem seu caso de uso ideal.

transition

Para mudancas de estado simples (hover, focus, active)

• Requer trigger (hover, click, class change)
• Apenas ponto A para ponto B
• Mais simples de implementar
• Ideal para: botoes, links, cards

animation

Para movimentos continuos ou complexos

• Pode iniciar automaticamente
• Multiplas etapas com @keyframes
• Loop infinito possivel
• Ideal para: loaders, splash, atencao

✓ Propriedades Performaticas

✓ transform - translate, scale, rotate
✓ opacity - transparencia
✓ filter - blur, brightness
✓ Usam compositor (GPU-accelerated)

✗ Evitar Animar

✗ width/height - causa reflow
✗ margin/padding - recalcula layout
✗ top/left/right/bottom - usa CPU
✗ Forcam repaint do documento

🚀 Transform: A Propriedade Magica

A propriedade transform e a base das animacoes performaticas. Ela permite mover, redimensionar, rotacionar e distorcer elementos sem afetar o layout da pagina.

translate() - Mover elementos

Desloca o elemento sem afetar outros elementos

transform: translateX(100px);   /* horizontal */
transform: translateY(-50px);   /* vertical */
transform: translate(10px, 20px); /* ambos */

scale() - Redimensionar

Aumenta ou diminui o tamanho do elemento

transform: scale(1.1);      /* 10% maior */
transform: scale(0.8);      /* 20% menor */
transform: scaleX(2);       /* dobra largura */

rotate() - Rotacionar

Gira o elemento em graus

transform: rotate(45deg);   /* 45 graus horario */
transform: rotate(-90deg);  /* 90 graus anti-horario */
transform: rotateY(180deg); /* flip horizontal (3D) */

skew() - Distorcer

Inclina o elemento nos eixos X e/ou Y

transform: skewX(10deg);    /* inclina horizontal */
transform: skewY(-5deg);    /* inclina vertical */
transform: skew(10deg, 5deg); /* ambos */

⚡ Por que transform e GPU-accelerated?

Transform cria uma nova camada de composicao que e processada pela GPU, separada do fluxo normal do documento. Isso significa:

• Nao causa reflow (recalculo de layout)
• Nao causa repaint de outros elementos
• Animacoes rodam a 60fps suavemente

💡 Padroes Comuns

Estes sao os padroes de animacao mais utilizados em interfaces modernas. Domine-os e voce tera um arsenal completo para qualquer projeto.

👁️ Fade In/Out

Aparece/desaparece gradualmente

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

➡️ Slide In

Desliza para dentro da tela

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

🔍 Zoom

Aumenta de tamanho ao aparecer

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

🏀 Bounce

Efeito elastico com overshoot

@keyframes bounce {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(10%); }
  70% { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}

💡 Combinando Animacoes

Voce pode combinar varias transformacoes em uma unica linha e usar animation-delay para criar sequencias:

.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }

🎯 Exercicio Pratico

Vamos aplicar o conhecimento em tres exercicios praticos: um botao com hover animado, um card com efeito lift, e um loading spinner.

1️⃣ Botao com Hover Animado

.btn-animated {
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease-out,
              box-shadow 0.2s ease-out;
}

.btn-animated:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.btn-animated:active {
  transform: translateY(0);
}

2️⃣ Card com Efeito Lift

.card-lift {
  background: #1f2937;
  padding: 24px;
  border-radius: 12px;
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out;
}

.card-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

3️⃣ Loading Spinner com Keyframes

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #374151;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

📋 Resumo do Modulo

✓

@keyframes - Define etapas da animacao com from/to ou percentuais

✓

Timing Functions - Controlam a curva de velocidade (ease, ease-out, cubic-bezier)

✓

Transition vs Animation - Transition para estados, animation para movimentos complexos

✓

Transform - GPU-accelerated: translate, scale, rotate, skew

✓

Performance - Anime apenas transform e opacity para 60fps

Proximo Modulo:

2.3 - Bibliotecas de Animacao (GSAP, Framer Motion)

← Modulo Anterior 📊 Ver Slides Proximo Modulo →