2026: CSS linear() für statisches HTML mit Keyframes, Übergängen und Safari-WebKit-Timing auf dem Mac

Marketing-Teams kopieren weiterhin uralte cubic-bezier-Tupel und wundern sich, warum Hero-Easing in Safari klebrig wirkt, während Chrome glatt bleibt. Die Funktion linear() beschreibt stückweise Fortschrittskurven über explizite Prozentpaare und passt damit besser zu modernen animation-timing-function- und transition-timing-function-Anforderungen. Für 2026 bleibt statisches HTML attraktiv, weil Bundles klein bleiben, doch die Kurve muss mit scroll-gesteuerten Timelines, prefers-reduced-motion und WebKit-Compositor-Scheduling harmonieren. Wer Bewegung nur als Dekoration behandelt, unterschätzt Barrierefreiheit: Wenn Nutzerinnen schwindelig werden, rettet keine mathematische Eleganz die Seite.

Ergänzend helfen unsere Artikel zu scroll-getriebenen Animationen und zu scroll-padding bei fixierten Headern, damit Anker und Navigation nicht über das Ziel hinausschießen.

Syntax und Stop-Abstände

Jeder Stop listet einen Ausgabe-Fortschrittswert gefolgt von einem Eingabe-Prozentsatz. Doppelte Prozente erzeugen harte Ecken; asymmetrische ease-out-Formen brauchen mindestens drei innere Stops. Halten Sie die Gesamtzahl zwischen fünf und neun, damit DevTools-Graphen und Code-Reviews lesbar bleiben.

.hero-card {
  transition: transform 420ms
    linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}

Prüfen Sie, dass der letzte Stop bei Eingabe 100% wirklich 1 erreicht; andernfalls wirkt der letzte Pixelruck wie ein versteckter Keyframe-Sprung.

linear() versus cubic-bezier

Bedarf	cubic-bezier	linear()	Hinweis
Einfaches Fade	Exzellent	Overkill	Klassische Kurven reichen.
Mehrstufiges Marketing-Overshoot	Umständlich	Natürlich	Bounce explizit kodieren.
Scroll-synchrones Tempo	Starr	Flexibel	Eingabeachse = Scrollfortschritt.

Kopplung an Scroll-Timelines

Wenn animation-timeline eine benannte Scroll-Timeline nutzt, ist die Eingabeachse Scrollfortschritt, keine Uhrzeit. Zu steile Mittelabschnitte fühlen sich wie doppelte Beschleunigung an. Wenn der Scrollbereich unter 400px liegt, dämpfen Sie die Mitte der Kurve, damit keine visuelle Überforderung entsteht.

prefers-reduced-motion

Unter @media (prefers-reduced-motion: reduce) sollten Opacity-Übergänge auf etwa 120 ms fallen oder Transformationen nahezu instant mit linear(0, 1) enden. Beachten Sie zusätzlich Safari Low Power Mode: Frames werden gebündelt, feine Shimmer wirken dann wie Bugs.

@supports und Fallbacks

Schreiben Sie zuerst die cubic-bezier-Zeile, dann überschreiben Sie innerhalb eines Feature-Tests:

@supports (animation-timing-function: linear(0, 1)) {
  .hero-card { animation-timing-function: linear(0, 0.2 15%, 1); }
}

Halten Sie die Reihenfolge stabil, damit Minifier nicht unerwartet permutieren.

Safari-Checkliste

1. Wenn möglich mit 120 fps aufnehmen und Mikroruckler zählen.
2. „Bewegung reduzieren“ in macOS aktivieren und ohne Cache neu laden.
3. Akku-„Stromsparmodus“ auf einem Laptop testen.
4. Technology Preview und stabiles Safari vergleichen.

Compositor und Jank

transform und opacity bleiben bevorzugt auf dem Compositor; filter-Blur plus linear() kann auf älteren GPUs den Hauptthread belasten. Begrenzen Sie gleichzeitige Blur-Animationen auf zwei Elemente und versetzen Sie Startzeiten um 40 ms.

Lange statische Seiten profitieren von Containment-Strategien aus den Scroll-Artikeln—so kämpfen scroll-gekoppelte Animationen nicht mit spät ladenden Webfonts.

Design-Handoff

Bitte Designer um normalisierte Graphen (Zeit 0–100 %, Ausgabe 0–1). Verankern Sie „Brand-Snap“ und „Auslaufen“, interpolieren Sie Zwischenstops, bis die Pixelabweichung unter dem schmalsten Viewport unter 1 CSS-Pixel bleibt. Versionieren Sie die genehmigte Zeichenkette mit Datum, damit Formatierungs-Commits die Kurve nicht still ersetzen.

Jährliche Motion-Audits vergleichen alte Screenrecordings mit dem aktuellen Stand—Line-Height-Änderungen verschieben subjektives Tempo, obwohl die Zahlen gleich bleiben.

Breakpoints und Container Queries

Kurven, die bei 1440px knackig wirken, fühlen sich bei 390px träge an, weil weniger Pixel pro Frame wandern. Pflegen Sie --ease-hero-wide und --ease-hero-narrow und schalten Sie per Container Query nahe 720px um.

will-change-Disziplin

Global will-change: transform zu setzen erschöpft GPU-Kachel-Speicher auf Intel-MacBook-Air-Hardware, die in Bildungseinrichtungen noch häufig vorkommt. Maximal drei gleichzeitige Hinweise im Viewport und nach animationend entfernen.

Datensparmodus

iOS „Daten sparen“ kann subtile Bewegung erlauben, aber keine großen LCP-Videocrossfades. Ein drittes Token-Set verkürzt Distanzen und entfernt Blur bei gleicher linear()-Struktur. Dokumentieren Sie, welche Assets tauschen, damit Kontrast nicht leidet.

Design-Tokens und Theme-Switching

Speichern Sie linear()-Strings als CSS-Custom-Properties auf Root-Ebene, nicht inline in jeder Komponente. Wenn Marketing drei Markenfarben parallel testet, verhindern zentrale Tokens, dass ein Entwickler versehentlich nur eine Breakpoint-Variante aktualisiert. Exportieren Sie die Tokens zusammen mit Komponenten-Screenshots in Ihr Storybook, damit visuelle Regressionstests dieselbe Kurve prüfen wie der Produktionscode.

Dark-Mode-Schalter sollten nicht nur Farben, sondern auch Bewegungsintensität justieren: Nachts wirken längere spatial Moves aggressiver, weil Kontraste höher wahrgenommen werden. Ein zweites linear()-Token pro Theme ist günstiger als nachträgliche Hotfixes nach Social-Media-Screenshots.

CI, Percy und „fast gleich“-Fallen

Pixeldiff-Tools markieren Animationen oft als Rauschen. Fixieren Sie Timestamps in Storyshots oder pausieren Sie Animationen per animation-play-state, bevor Percy läuft. Dokumentieren Sie, welche Stories absichtlich Bewegung zeigen, damit Reviewer wissen, wann ein Diff echt ist.

Wenn Sie visuelle Tests auf Linux-Headless-Chromium fahren, spiegeln die Ergebnisse nicht die Safari-Compositor-Pfade wider. Halten Sie mindestens eine wöchentliche manuelle Safari-Session auf physischer Apple-Hardware—eine gemietete Mac-mini-Instanz reicht vollkommen.

Assistenztechnologien und Fokus-Ringe

linear() betrifft auch Fokus-Übergänge: ein zu langsames Einblenden des Focus-Rings kann Tastaturnutzerinnen verwirren, weil der Ring hinter dem Cursor „nachzieht“. Halten Sie Fokus-Transitions unter 200 ms, wenn gleichzeitig Scroll-Animationen laufen, oder koppeln Sie den Ring an outline-offset statt an breite Translationen.

Screenreader werden nicht durch Easing beeinflusst, aber motorisch eingeschränkte Nutzer spüren Verzögerungen zwischen Klick und sichtbarer Reaktion. Messen Sie Input-to-Paint mit Performance-Panels; wenn linear() die Paint verzögert, weil Layout thrashed, ist die Kurve unschuldig—trotzdem wirkt sie schuldig.

Drittanbieter-Widgets und CSS-Kaskade

Chat-Blasen, Cookie-Banner und Support-Widgets injizieren häufig eigene transition-Shorthands, die Ihre linear()-Overrides neutralisieren. Prüfen Sie Spezifität und Layer-Reihenfolge; manchmal brauchen Sie :where(.page-root .hero)-Selektoren oder @layer utilities, damit Marketing-Komponenten nicht still revertieren.

Dokumentieren Sie pro Widget, ob es !important setzt. Wenn ja, planen Sie einen Eskalationspfad zum Vendor oder wrappen Sie das Widget in einen iframe mit reduzierter Oberfläche—sonst verschwenden Designerstunden an unwinnbare Spezifitätskriege.

Zahlenbeispiele für Stakeholder

Halten Sie drei harte Kennzahlen bereit: maximale Hero-Translation in Pixel (z. B. 24 px vertikal), maximale gleichzeitige Blur-Fläche in Prozent des Viewports (z. B. 12 %), und Obergrenze paralleler scroll-gekoppelter Animationen (z. B. vier). Diese Zahlen überstehen politische Diskussionen schneller als reine Geschmacksargumente.

Verknüpfen Sie die Kennzahlen mit Business-Risiken: längere Aufenthaltszeiten auf Pricing-Seiten, wenn Hero-Animationen unter Safari ruckeln, oder höhere Bounce-Rate auf Mobilgeräten, wenn Container-Query-Wechsel fehlen.

Ein Satz für die Roadmap: dokumentieren Sie pro Release, welche linear()-Tokens sich geändert haben, damit Support keine falschen Regressionen meldet.

FAQ

Ersetzt linear() cubic-bezier?

Nein, beides ergänzt sich.

Mit scroll-gesteuerten Animationen?

Ja, mit begrenzten Scrollbereichen und Compositor-Tests.

prefers-reduced-motion?

Dauern kürzen oder räumliche Bewegung entfernen.

Wie viele Stops?

Ziel fünf bis neun.

Easing ist subjektiv und hängt vom Display-Pipeline-Setup ab. Ein gemieteter Apple-Silicon-Mac mini über MacHTML (ca. 16,9 USD pro Tag) reproduziert Safari-Frametiming, P3-Gamma und Night-Shift-Tönung—Details, die Linux-Screenshot-Bots nicht liefern. Für eine Launch-Woche online lassen, parallel aufzeichnen, danach abschalten: elastischer als ein weiterer Tower unter dem Schreibtisch.

Agenturen mit vielen Kunden isolieren Motion-Systeme besser pro macOS-Benutzerprofil, damit Font-Caches und Preview-Ports nicht kollidieren.