Pular para conteúdo

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

Objetivo

Objetivo: Dar vida e interatividade às suas páginas web utilizando transições suaves, transformações de elementos e animações complexas baseadas em keyframes.

1. Transições Suaves (transition) 🧚

A transição permite que a mudança de um estilo para outro ocorra de forma gradual, em vez de ser instantânea.

.botao {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

.botao:hover {
    background-color: darkblue;
}
  • 0.5s: A duração da animação (meio segundo).
  • ease-in-out: O ritmo da transição (começa lento, acelera e termina lento).

2. Transformações (transform) 📐

Com a propriedade transform, podemos girar, inclinar, aumentar ou mover elementos sem afetar o layout ao redor.

  • rotate(45deg): Gira o elemento.
  • scale(1.2): Aumenta o tamanho em 20%.
  • translate(10px, 20px): Move o elemento nos eixos X e Y.

3. Animações com Keyframes 🎬

Quando precisamos de algo mais complexo que uma simples transição, usamos os Keyframes (Quadros-Chave).

@keyframes flutuar {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.imagem-hero {
    animation: flutuar 3s infinite ease-in-out;
}
  • 3s: Duração de um ciclo.
  • infinite: Repete para sempre.

4. Visualizando o Ciclo da Animação 📊

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

5. Prática: Botão Pulsante 🚀

Vamos criar um efeito de pulsação no terminal:

$ touch index.html estilo.css
$ # No CSS, crie uma animação de escala:
$ @keyframes pulsar {
$   from { transform: scale(1); }
$   to { transform: scale(1.1); }
$ }
$ .botao { animation: pulsar 1s infinite alternate; }

6. Mini-Projeto: Dashboard Interativo 🖱️

  1. Crie um card com uma imagem e um título.
  2. Adicione uma transição para que, ao passar o mouse (:hover), a sombra do card aumente e ele suba levemente (translateY).
  3. Crie um ícone de "carregando" (pode ser um círculo SVG).
  4. Faça o ícone girar infinitamente usando rotate(360deg) nos keyframes.
  5. Dica: Use transition: all 0.3s para que todas as mudanças sejam suaves.

7. Exercícios Progressivos 📝

Básicos

  1. Qual a diferença entre uma transição e uma animação?
  2. O que faz a propriedade transform: scale(1.5)?

Intermediários

  1. Como fariam para uma animação nunca parar de rodar?
  2. Para que serve o seletor :hover no contexto de transições?

Desafio 🧠

  1. Pesquise sobre a propriedade opacity. Como você criaria um efeito de "esmaecer" (fade-in) para que um texto apareça suavemente ao carregar a página?

Próxima Aula: Vamos consolidar tudo no Projeto Final + Deploy! 🚢