Técnicas Avançadas de CSS com Claude Code

Dominando Técnicas Avançadas de Animação CSS

Vamos explicar como implementar eficientemente técnicas práticas de animação CSS que vão além de transition e keyframe básicos usando o Claude Code.

Animações Vinculadas ao Scroll

> Implemente animações vinculadas ao scroll usando apenas CSS.
> Use a Scroll-driven Animations API.

/* Barra de progresso do scroll */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  transform-origin: left;
  animation: scaleProgress linear;
  animation-timeline: scroll();
}

@keyframes scaleProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Animação de aparecimento de elementos */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

View Transitions API

// Animação de transição de página
async function navigateWithTransition(url: string) {
  if (!document.startViewTransition) {
    window.location.href = url;
    return;
  }

  const transition = document.startViewTransition(async () => {
    const response = await fetch(url);
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    document.body.innerHTML = doc.body.innerHTML;
    document.title = doc.title;
    window.history.pushState({}, '', url);
  });

  await transition.finished;
}

/* Personalização de View Transitions */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* Transição de elementos individuais */
.card-image {
  view-transition-name: card-hero;
}

::view-transition-old(card-hero),
::view-transition-new(card-hero) {
  animation-duration: 0.4s;
}

Animações Complexas com Keyframes

/* Animação de digitação */
.typing {
  overflow: hidden;
  border-right: 2px solid var(--color-accent);
  white-space: nowrap;
  animation:
    typing 3s steps(30) 1s forwards,
    blink 0.75s step-end infinite;
  width: 0;
}

@keyframes typing {
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Animação de partículas */
.particle {
  --delay: 0s;
  --x: 0px;
  --y: 0px;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: particle 1.5s var(--delay) ease-out infinite;
}

@keyframes particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0);
  }
}

Otimização de Performance

/* Utilizando aceleração GPU */
.animated-element {
  /* Animar apenas transform e opacity */
  will-change: transform, opacity;
  transform: translateZ(0); /* Criar camada independente */
}

/* Remover will-change após conclusão da animação */
.animated-element.done {
  will-change: auto;
}

/* Evitar layout shift */
.expand-animation {
  /* Usar max-height em vez de height */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expand-animation.open {
  max-height: 500px; /* Altura suficiente */
}

Suporte a Acessibilidade

/* Respeitar configuração de redução de movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .typing {
    width: 100%;
    border-right: none;
  }

  .progress-bar {
    animation: none;
    transform: scaleX(1);
  }
}

Resumo

Animações CSS avançadas requerem um equilíbrio entre otimização de performance e acessibilidade. Com o Claude Code, você pode implementar corretamente funcionalidades modernas como View Transitions API e Scroll-driven Animations. Combinando com variáveis CSS, é possível gerenciar parâmetros de animação de forma flexível. Para detalhes sobre a View Transitions API, consulte Chrome Developers.