Módulo 7: Dar Vida ao Site
2. Resumo da Aula Anterior
No Módulo 6, aprendemos a usar Media Queries para tornar o nosso site responsivo. Agora que ele se adapta a qualquer ecrã, vamos aprender a torná-lo interativo e fluido com animações.
3. O Que Vais Aprender Hoje
- ✅ Transições suaves com transition.
- ✅ Transformações (rodar, escalar, mover) com transform.
- ✅ Animações complexas com @keyframes.
- ✅ Boas práticas para não tornar o site lento.
4. Teoria: O Cinema do CSS
Conceito: Uma transição acontece quando um elemento muda de um estado para outro (ex: quando passas o rato por cima). Uma animação é uma sequência de estados definida por ti que pode rodar em loop ou uma única vez.
🎬 Analogia: O Interruptor vs. O Filme
Imagina as luzes da tua sala:
- Sem Transição: Clicas no botão e a luz acende instantaneamente. É brusco.
- Transition (O Dimmer): Clicas no botão e a luz vai aumentando de brilho suavemente durante 1 segundo. É elegante.
- Animation (O Filme): Clicas no botão e as luzes começam a piscar, mudam de cor e fazem um padrão rítmico. Tu defines o guião!
5. Exemplos Práticos
Exemplo 1: Transição Suave no Botão
Mudar a cor sem ser brusco.
.btn {
background-color: blue;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: darkblue;
transform: scale(1.1); /* Aumenta um pouco */
}O transition diz ao browser: "se a cor mudar, fá-lo em 0.3 segundos".
Exemplo 2: Criar uma Animação (Pulsação)
Definir o movimento e aplicá-lo.
@keyframes pulsar {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
.notificacao {
animation: pulsar 1s infinite alternate;
}alternate faz com que a animação vá e volte, criando um efeito de pulsação suave.
6. Agora é a Tua Vez!
Vamos criar um ícone que roda:
- Cria uma
<div>com um emoji lá dentro. - No CSS, adiciona uma transição para a propriedade
transform. - No
:hoverda div, adicionatransform: rotate(360deg);. - Experimenta passar o rato e vê o ícone dar uma volta completa!
- Dica: Tenta adicionar
border-radius: 50%para o ícone parecer uma roda.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Transition é excelente para interações simples (hover, focus).
- 📌 Transform move, roda e escala sem estragar o layout.
- 📌 @keyframes define os passos de uma animação.
- 📌 Menos é mais: usa animações para guiar o utilizador, não para o distrair.
9. Desafios Práticos
Desafio 1: O Atrasado
Como podes fazer uma animação esperar 2 segundos antes de começar?
Desafio 2: Velocidade Constante
Se quiseres uma animação que ande sempre à mesma velocidade (sem acelerar ou travar), que valor usas no timing function?
Desafio 3: O Ponto Final
Como garantires que um elemento fica na posição final de uma animação e não volta ao início quando ela acaba?