Physikbasiertes Easing

Herkömmliche CSS-Easing-Funktionen wie ease-in oder cubic-bezier() sind auf einfache Kurven beschränkt. Es ist daher nicht möglich, komplexe physikbasierte Effekte wie Abprallen oder Federn zu erstellen. Die Timing-Funktion linear() löst dieses Problem, indem Sie eine Reihe von Stopps angeben können, die komplexe Kurven annähern können. Übergänge und Animationen werden anhand von geraden Linien zwischen den Haltestellen interpoliert. Bei genügend Haltestellen kann dies jedoch flüssig wirken.

Implementierungsschritte

1. Kurvenstopps generieren: Es ist unpraktisch, Dutzende von Punkten für eine Federung oder einen Sprung manuell zu zeichnen. Verwenden Sie eine Timing-Funktion aus einer externen Bibliothek oder ein Tool, um eine vorhandene JavaScript-Easing-Funktion oder einen SVG-Pfad in die linear()-Syntax zu konvertieren. Optional: Speichern Sie diese Timing-Funktionen als benutzerdefinierte CSS-Eigenschaften, um sie auf Ihrer gesamten Website wiederzuverwenden.
2. Timing-Funktion definieren: Wenden Sie die generierten Stopps auf die Property transition-timing-function oder animation-timing-function oder über die Kurzschreibweisen transition oder animation an.
3. Dauer anpassen: Im Gegensatz zu JavaScript-Physik-Engines, bei denen die Dauer von physikalischen Eigenschaften (Masse, Steifigkeit) abgeleitet wird, ist bei CSS weiterhin eine feste duration erforderlich. Möglicherweise müssen Sie die Dauer anpassen, um den gewünschten Effekt zu erzielen.

Beispiel: Spring Easing

In diesem Beispiel wird gezeigt, wie Sie mit einer benutzerdefinierten linear()-Funktion einen Federeffekt erstellen, der den Zielwert überschreitet, bevor er sich einpendelt.

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

Beispiel: Bounce Easing

In diesem Beispiel wird gezeigt, wie Sie mit einer benutzerdefinierten linear()-Funktion einen Bounce-Effekt erstellen.

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

Wichtige Überlegungen

• Leistung: Für die flüssigsten physikbasierten Animationen solltest du linear() auf Attribute anwenden, die in einem separaten Thread ausgeführt werden, z. B. transform und opacity.
• Präzision im Vergleich zur Nutzlast: Mehr Stopps führen zwar zu einer glatteren Kurve, erhöhen aber auch die Größe des CSS. Bei den meisten Generatoren können Sie die Kurve „vereinfachen“, um das optimale Gleichgewicht zwischen Glätte und Codegröße zu finden.
• Deckkraft für Bounces vermeiden: Wenn Sie Bounce-Easings auf opacity anwenden, kann es zu visuell störendem Flackern kommen, wenn der Wert unter 0 oder über 1 liegt.
• Barrierefreiheit: Komplexe physikbasierte Animationen können für einige Nutzer ablenkend sein oder Bewegungsempfindlichkeit verursachen. Respektieren Sie immer die Einstellungen der Nutzer, indem Sie diese Animationen reduzieren oder deaktivieren.

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Fallback-Strategien

CSS-Fallback

Für Browser, die linear() nicht unterstützen, sollten Sie eine Standard-Easing-Funktion als Fallback bereitstellen. Der Browser ignoriert den Wert linear(), wenn er ihn nicht erkennt, und greift auf die vorherige gültige Deklaration zurück.

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

JavaScript-Bibliothek-Fallback (Motion/GSAP)

Optional: Wenn eine hochauflösende physikalische Animation auch in älteren Browsern wichtig ist, können Sie eine JavaScript-Bibliothek wie Motion (motion.dev) oder GSAP (greensock.com) verwenden, um die Animation zu verarbeiten, wenn linear() nicht unterstützt wird.

1. Unterstützung erkennen: Mit CSS.supports() können Sie prüfen, ob der Browser die Funktion linear() unterstützt.
2. Bedingt laden/anwenden: Wenn die Funktion nicht unterstützt wird, verwenden Sie die Spring- oder Bounce-Implementierung der Bibliothek.

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

Sie können @supports auch in CSS für eine explizitere Featureerkennung verwenden:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}