Fortgeschrittene CSS-Techniken mit Claude Code

Fortgeschrittene CSS-Animationstechniken meistern

Über grundlegende Transitions und Keyframes hinaus zeigen wir, wie Sie praktische CSS-Animationstechniken mit Claude Code effizient implementieren.

Scroll-gesteuerte Animationen

> Implementiere Scroll-gesteuerte Animationen nur mit CSS.
> Verwende die Scroll-driven Animations API.

/* Scroll-Fortschrittsbalken */
.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); }
}

/* Element-Erscheinungsanimation */
.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

// Seitenübergangsanimation
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;
}

/* View Transitions anpassen */
::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); }
}

/* Individuelle Element-Transitions */
.card-image {
  view-transition-name: card-hero;
}

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

Komplexe Keyframe-Animationen

/* Tipp-Animation */
.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; }
}

/* Partikel-Animation */
.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);
  }
}

Performance-Optimierung

/* GPU-Beschleunigung nutzen */
.animated-element {
  /* Nur transform und opacity animieren */
  will-change: transform, opacity;
  transform: translateZ(0); /* Eigene Ebene erstellen */
}

/* will-change nach Abschluss der Animation zurücksetzen */
.animated-element.done {
  will-change: auto;
}

/* Layout-Verschiebungen vermeiden */
.expand-animation {
  /* max-height statt height verwenden */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expand-animation.open {
  max-height: 500px; /* Ausreichende Höhe */
}

Barrierefreiheit

/* Einstellung zur Reduzierung von Animationen respektieren */
@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);
  }
}

Zusammenfassung

Bei fortgeschrittenen CSS-Animationen ist die Balance zwischen Performance-Optimierung und Barrierefreiheit wichtig. Mit Claude Code können Sie auch neueste Funktionen wie die View Transitions API und Scroll-driven Animations präzise implementieren. In Kombination mit CSS-Variablen können auch Animationsparameter flexibel verwaltet werden. Details zur View Transitions API finden Sie unter Chrome Developers.