Micro-Animações para Cards de Etapas

Exemplos interativos de animações modernas - Passe o mouse sobre os cards

1Hover Elevation + Glow

Cadastro Concluído

Card eleva e brilha ao passar o mouse

2Check Animation (Stroke Draw)

Check Animado

Clique para ver o check sendo desenhado

3Progress Bar Shimmer

Processando

Barra de progresso com efeito shimmer

15%

4Pulse Effect

Aguardando

PENDENTE

Ícone e badge com efeito de pulsação

5Scale Pop Animation

Pop Effect

Clique para ver o ícone "saltar"

6Shake Animation (Locked)

Bloqueado

Clique para ver o efeito de "shake"

7Slide In + Fade

Slide Effect

Hover para ver detalhes deslizarem

✨ Informações adicionais aparecem suavemente

8Glassmorphism Effect

Glass Card

Efeito de vidro fosco com blur de fundo

Animações CSS Customizadas

@keyframes shimmer
0% { transform: translateX(-100%) }
100% { transform: translateX(100%) }
@keyframes scale-pop
0%, 100% { transform: scale(1) }
50% { transform: scale(1.2) }
@keyframes shake
0%, 100% { transform: translateX(0) }
25% { transform: translateX(-5px) }
75% { transform: translateX(5px) }
transition timing
cubic-bezier(0.4, 0, 0.2, 1)
duration: 300ms - 500ms