Animationen ohne JS: CSS kann schon alles

Bis vor kurzem bedeutete „Scrollen“ oder „Bildschirmwechsel“ Ereignishandler und einen Haufen JS-Code. Heute übernehmen die Browser-Engines das Rendern, und wir beschreiben die Absicht in CSS. Vorteile: weniger Abhängigkeiten, flüssigeres Arbeiten auf der Ebene des Composers, klarere Leistungsbeschränkungen.

🚀 Scroll-linked animations: @scroll-timeline

Wir verknüpfen den Animationsfortschritt mit dem Scrollen. Der Browser selbst gibt die "Zeitleiste" an - es bleibt, Keyframes daran zu binden.

@scroll-timeline fade-tl {
  source: auto;               /* ближайший скроллируемый контейнер */
  orientation: block;         /* по оси прокрутки */
  scroll-offsets: 0%, 100%;   /* начало/конец */
}

.section__item{
  animation: fade-in 1s both linear;
  animation-timeline: fade-tl;        /* ← магия */
  animation-range: entry 0% cover 60%;/* когда и как играться */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Wo zu verwenden: Karten, Parallaxe, Lesefortschrittsbalken, sticky Abschnittsüberschriften.

🔁 View Transitions API — „Übergänge“ zwischen Zuständen

Native Übergänge zwischen Seiten/Status ohne manuelle Synchronisierung. JS startet die Transaktion, CSS erstellt sie.

/* CSS */
::view-transition-old(root),
::view-transition-new(root){
  animation: fade .35s ease;
}

@keyframes fade {
  from { opacity: .001 }
  to   { opacity: 1 }
}

/* JS (одна строка в обработчике) */
// document.startViewTransition(() => router.navigate('/about'));

Chip: Sie können Elemente über view-transition-name benennen und bestimmte Blöcke (Heldenbild, Titel) „überspringen“.

📦 Container-Abfragen + Animationen

Komponenten reagieren auf die Breite/Höhe des übergeordneten Elements, nicht auf den gesamten Viewport. Sie können die Karte beim Ändern des Bereichs nahtlos neu zusammenstellen.

.card{
  container-type: inline-size; /* объявили контейнер */
}

@container (min-width: 520px){
  .card__media{ inline-size: 280px }
  .card__body{ animation: grow .4s ease }
}

@keyframes grow{
  from{ transform: scale(.96) }
  to  { transform: scale(1) }
}

🧲 Status-Selektor :has() ohne JS

Die Reaktion des übergeordneten Elements auf den Status/die Anwesenheit von untergeordneten Elementen ist ein Trigger für die Animation.

.accordion:has(input:checked) .accordion__panel{
  grid-template-rows: 1fr;          /* раскрываем */
  transition: grid-template-rows .3s ease;
}
.accordion:not(:has(input:checked)) .accordion__panel{
  grid-template-rows: 0fr;          /* скрываем */
}
.card:has(:hover){ transform: rotate(1.5deg) scale(1.03); transition:.25s }

🧩 Individuelle Transform-Eigenschaften und Komposition von Animationen

Anstelle des "großen" transform sind unabhängige translate, scale, rotate verfügbar. Und mit der Eigenschaft animation-composition können Sie Effekte kombinieren.

.chip{
  translate: 0 8px;        /* читаемее и безопаснее */
  rotate: 1deg;
  transition: translate .25s ease, rotate .25s ease;
}
.chip:hover{ translate: 0 0; rotate: 0deg }

.pulse{ animation: pulse 1.2s infinite ease; }
.float{ animation: float 3s infinite ease alternate; }
.pulse, .float{ animation-composition: add; } /* суммируем эффекты */

@keyframes pulse{ from{scale:1} 50%{scale:1.04} to{scale:1} }
@keyframes float{ from{translate:0 0} to{translate:0 -8px} }

📊 Vorher/Nachher

CSS hat ein Niveau erreicht, auf dem die meisten Schnittstellenanimationen deklarativ erstellt werden und schneller laufen. Verwenden Sie @scroll-timeline, View Transitions, :has(), Container Queries und individuelle transform-Eigenschaften — und lassen Sie JS dort, wo Logik benötigt wird, nicht Render.

📚 Möchten Sie tiefer in das Thema einsteigen?

Im Anhang Kodik Sie finden detaillierte Lektionen zu verschiedenen Themen, Schritt-für-Schritt-Übungen, Fehleranalyse und praktische Übungen direkt auf Ihrem Handy oder im Browser.

Und wenn Sie über Neuigkeiten, neue Funktionen und nützliche Materialien informiert werden möchten, abonnieren Sie unseren Telegram-Kanal. Dort ist es gemütlich, geschäftlich und mit Liebe zum Code ❤️

💬 Welche Effekte hast du bereits von JS auf CSS übertragen und was hat die meiste Wirkung gezeigt?