Aula 15 - Animações e Transições ✨

Dando Movimento ao seu Design

---

👋 Olá!

A Web não precisa ser estática.

Pequenos movimentos podem transformar um site comum em uma experiência incrível! 🎬

---

Agenda de Hoje 📅

1. O que são Transições?
2. Manipulando o Tempo
3. Transformações (Girar, Escalar)
4. O Mundo das Animações
5. Keyframes (Quadros-Chave)
6. Interatividade Ética

---

🧚 1. Transições (Transitions)

• Permitem que mudanças ocorram de forma suave.
• Sem o efeito "pisca-pisca" das mudanças instantâneas.

---

Como aplicar? 🛠️

.botao {
  transition: all 0.3s ease;
}

.botao:hover {
  background: red;
}

- all: Todas as propriedades. - 0.3s: Tempo de duração. - ease: Ritmo da animação.

---

📐 2. Transformações (Transforms)

Mude a forma e a posição sem quebrar o layout!

---

Girar (Rotate) 🔄

img:hover {
  transform: rotate(15deg);
}

---

Aumentar (Scale) 🔍

button:hover {
  transform: scale(1.1);
}

---

Mover (Translate) 📍

div:hover {
  transform: translateY(-5px);
}

---

🎬 3. Animações Complexas

Para quando a transição não é suficiente.

---

@keyframes 🖼️

• Definimos os passos da animação.

@keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

---

Aplicando a Animação 🏷️

.icone {
  animation: pulsar 2s infinite;
}

- pulsar: Nome que criamos. - 2s: Tempo de um ciclo. - infinite: Nunca para!

---

📊 Fluxo de Loop

graph LR
    A[Início - 0%] --> B[Meio - 50%]
    B --> C[Fim - 100%]
    C -- Loop --> A

---

🤝 4. Interatividade

• Use animações para dar feedback ao usuário.
• Um botão que aumenta levemente confirma o clique.
• Um ícone que gira indica carregamento (loading).

---

🕵️‍♂️ Boas Práticas

• Menos é mais! Não sature o site de movimento.
• Use animações curtas (entre 0.1s e 0.5s).
• Respeite quem tem sensibilidade ao movimento.

---

Resumo da Aula ✅

• transition suaviza mudanças.
• transform altera a geometria.
• @keyframes cria movimentos contínuos.
• Interatividade melhora a experiência.

---

Próxima Aula 🚢

Projeto Final + Deploy

Onde vamos publicar nosso trabalho para o mundo ver!

---

Dúvidas? 🤔

"Animação é a alma da interface. Use-a para guiar o olhar, não para distrair o usuário."