Animações CSS com Bootstrap

Animações de Pulse

Pulse Normal
Pulse Lento
Pulse Rápido
Exemplo com Botões Bootstrap:

Animações de Bounce

Bounce Normal
Bounce Leve
Bounce Forte
Exemplo com Ícones:

Animações de Movimento (Slide)

Slide In Left
Slide In Right
Slide In Up
Slide In Down
Exemplo com Cards Bootstrap:
Card 1
Slide da esquerda
Card 2
Slide da direita
Card 3
Slide de baixo
Card 4
Slide de cima

Animações de Rotação

Rotação Normal
Rotação Lenta
Rotação Rápida
Exemplo com Spinners Bootstrap:

Animações de Fade

Fade In
Fade Out
Exemplo com Alerts Bootstrap:

Animações de Zoom

Zoom In
Zoom Out
Exemplo com Imagens:
Zoom In Zoom Out

Animações de Shake

Shake Normal
Shake Forte
Exemplo com Formulários Bootstrap:
Campo inválido!
Senha muito curta!

Animações de Flip

Flip Normal
Flip Horizontal
Exemplo com Cards Bootstrap:
Card com Flip

Este card tem uma animação de flip quando carregado.

Ver mais

Animações de Float

Float Normal
Float Leve
Exemplo com Badges Bootstrap:
Notificação Novo Urgente

Animações de Wobble

Wobble
Exemplo com Botões Bootstrap:

Animações Especiais

Tada
Flash
Rubber Band
Jello
Heartbeat
Glitch
Exemplo com Ícones:

Animações no Hover

Hover Pulse
Hover Bounce
Hover Shake
Hover Rotate
Hover Zoom
Hover Wobble
Exemplo com Botões Bootstrap:

Combinações de Animações

Exemplo 1: Card com múltiplas animações
Card Animado

Este card tem slide in e pulse lento.

Ação
Exemplo 2: Botão com delay
Exemplo 3: Ícone com duração personalizada
Exemplo 4: Alert com animação infinita

Como Usar as Animações

1. Incluir o CSS
<link rel="stylesheet" href="animacoes.css">
2. Aplicar classes de animação
<div class="animate-pulse">Conteúdo</div>
<button class="btn btn-primary animate-bounce">Botão</button>
<i class="fas fa-heart animate-pulse-fast"></i>
3. Animações no hover
<div class="hover-animate-pulse">Hover aqui</div>
<button class="hover-animate-bounce">Hover no botão</button>
4. Classes de delay
<div class="animate-bounce delay-1s">Delay 1s</div>
<div class="animate-bounce delay-2s">Delay 2s</div>
<div class="animate-bounce delay-3s">Delay 3s</div>
5. Classes de duração
<div class="animate-rotate duration-1s">1s</div>
<div class="animate-rotate duration-2s">2s</div>
<div class="animate-rotate duration-3s">3s</div>
6. Animações infinitas
<div class="animate-pulse animate-infinite">Infinito</div>
<div class="animate-rotate animate-infinite">Sempre girando</div>