CSS-Einblend-Animation-Generator

CSS-Einblend-Animation-Generator: wofür es gut ist

Wähle den Effekt, die Dauer, die Kurve (mit dem empfohlenen starken ease-out), den Abstand und die Kaskadenverzögerung zwischen den Elementen. Die Vorschau zeigt sechs einlaufende Blöcke und lässt sich wiederholen.

Der Code nutzt Übergänge von opacity und transform, einen IntersectionObserver, um zu animieren, wenn das Element auf dem Bildschirm erscheint, und eine Version ohne Verschiebung für alle, die weniger Bewegung bevorzugen. Ohne JavaScript erscheint der Inhalt normal.

So geht’s

1. Wähle Effekt, Dauer und Kurve.
2. Passe Abstand und Kaskade an und sieh die Vorschau.
3. Kopiere das CSS und das Skript und nutze die Klasse anima.

Wann nutzen

• Abschnitte von Landingpages, die beim Scrollen erscheinen.
• Karten von Leistungen und Produkten in Kaskade.
• Dem Auftritt einer Firmenwebsite den letzten Schliff geben.

Häufige Fragen

Welche Dauer nutzen?

Für Oberflächenelemente 150 bis 300 Millisekunden. In Abschnitten von Präsentationsseiten wirken bis zu etwa 600 ms noch natürlich. Zu lange Animationen lassen die Website langsam wirken.

Welche Kurve wählen?

Für Dinge, die in den Bildschirm kommen, nutze eine Kurve, die am Ende abbremst (starkes ease-out, wie cubic-bezier(0.23, 1, 0.32, 1)): Die Bewegung beginnt schnell und setzt sich sanft ab. Vermeide ease-in bei Einblendungen, weil es genau den Anfang verzögert.

Und wer keine Bewegung mag?

Der Code beachtet die Systemeinstellung zum Reduzieren von Bewegung (prefers-reduced-motion): Die Elemente erscheinen nur mit kurzem Fade, ohne Verschiebung.

Wie funktioniert der Modus beim Scrollen?

Ein IntersectionObserver fügt die Klasse visivel hinzu, wenn das Element in den Bildschirm kommt. Ohne JavaScript erscheinen die Elemente normal, ohne Animation.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools