prefers-reduced-motion desativa todas as animações desta página automaticamente. Para ver as transições, role lentamente ou clique em Replay.

Entrada — [data-animate]

Aparição via scroll-trigger. O JS utilities/animations.js aplica .is-visible quando o elemento entra no viewport (threshold 0.12).

fade-up Padrão recomendado para a maioria dos blocos.
fade-up · delay 2 150ms de atraso (--delay-2).
fade-up · delay 4 300ms de atraso (--delay-4).
slide-left Entrada lateral suave (16px).
slide-right Espelho do slide-left.
scale-in De 0.96 para 1.0.
HTML
<div data-animate="fade-up">Conteúdo</div>
<div data-animate="fade-up" data-delay="2">Atrasado 150ms</div>
<div data-animate="slide-left">Vem da esquerda</div>

<!-- no fim do body -->
<script src="/utilities/animations.js" defer></script>

Loop — .anim-float, .anim-pulse

Animações contínuas para chamar atenção. Usar com parcimônia — máximo 1 elemento por seção.

.anim-float Sobe e desce 6px em 3.6s.
.anim-pulse Pulsa 1.0→1.04 em 2.4s.
.anim-fade-in Fade-in único no load.
HTML
<span class="badge anim-float">Novo!</span>
<button class="btn btn--primary anim-pulse">Garanta sua vaga</button>

Hover — .hover-lift, .hover-scale

Micro-interações em transform (GPU). Duração 200ms (--duration-base). Passe o mouse:

.hover-lift Sobe 3px no hover.
.hover-scale Escala 1.03 no hover.
combinado Lift + scale juntos.
HTML
<article class="card hover-lift">...</article>
<img class="hover-scale" src="produto.avif" alt="...">

Stagger — .anim-stagger

Filhos diretos entram em cascata via :nth-child (até 6 delays distintos, depois clamp em --delay-6). Sem JS.

1delay 75ms
2delay 150ms
3delay 225ms
4delay 300ms
5delay 375ms
6delay 450ms
HTML
<div class="anim-stagger">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>