So nutzt du: CSS Hover-Animation Generator
- Wähle eine Hover-Voreinstellung wie Vergrößern, Anheben, Kippen oder Vibrieren.
- Wechsle vorn in der Vorschau zwischen Button, Karte, Icon und Text und fahre mit der Maus darüber, um es zu testen.
- Passe Dauer, Easing und Keyframes an, bis es sich richtig anfühlt.
- Kopiere das CSS – es greift auch bei
:focus-visiblefür Nutzer mit Tastatur.
Hover-Animation vs. Transition
Für einen einfachen Wechsel von A nach B reicht eine transition völlig aus, und sie läuft beim Verlassen mit der Maus sauber zurück. Keyframe-Animationen auf :hover spielen ihre Stärken aus, wenn der Effekt mehrere Schritte hat (ein Hüpfen, ein Vibrieren, ein Wackeln) oder während des Hovers in einer Schleife laufen soll. Dieser Generator gibt sowohl :hover- als auch :focus-visible-Selektoren aus, damit Tastaturnutzer das gleiche Feedback bekommen. Halte Effekte dezent: Rund 150–300 ms wirken reaktionsschnell.
Was du bauen kannst
- Keyframe-Zeitleiste – Füge beliebig viele Keyframes hinzu, verschiebe sie auf neue Prozentwerte und gib jedem sein eigenes Easing.
- Eigenschaften – Translate X/Y, Rotation, 3D-Rotation X/Y, Skalierung, Skew, Deckkraft, Weichzeichner, Glow (box-shadow), Hintergrundfarbe und Eckenradius. Fehlende Werte werden interpoliert, daher springen Transformationen nie.
- Auslöser – beim Laden, beim Hover, beim Klick, beim Scrollen ins Sichtfeld oder eine reine CSS-Animation, die vom Scrollen gesteuert wird.
- Stagger – Animiere eine Liste Element für Element mit einer einzigen CSS-Custom-Property.
- Inspektion – Pausiere, springe Bild für Bild durch die Animation, verlangsame auf ¼ Geschwindigkeit und aktiviere Onion Skin, um alle Keyframes gleichzeitig zu sehen.
- Export – CSS-Kurzschreibweise oder ausgeschriebene Eigenschaften, HTML, JavaScript, Tailwind v3 und v4, ein SCSS-Mixin, eine eigenständige Demo-Datei oder ein Share-Link.
Die Kurzschreibweise von animation
| Teil | Beispiel | Bedeutung |
|---|---|---|
| Name | fade-in-up | Die auszuführende @keyframes-Regel |
| Dauer | 0.6s | Länge eines Durchlaufs |
| Timing-Funktion | cubic-bezier(.33,1,.68,1) | Geschwindigkeitskurve zwischen den Keyframes |
| Verzögerung | 0.2s | Wartezeit vor dem Start; negative Werte starten mitten in der Animation |
| Anzahl der Durchläufe | infinite | Wie oft die Animation abläuft |
| Richtung | alternate | Jeder zweite Durchlauf läuft rückwärts |
| Füllmodus | both | Hält den ersten Frame vor und den letzten Frame nach der Animation |
Barrierefreiheit
Bewegung kann bei manchen Menschen Schwindel oder Übelkeit auslösen. Mit prefers-reduced-motion berücksichtigen schaltet das CSS die Animation für Besucher ab, die „Bewegung reduzieren“ im Betriebssystem aktiviert haben. Vermeide Blinken öfter als dreimal pro Sekunde und halte Endlosanimationen dezent oder biete eine Möglichkeit zum Pausieren.
Tipps zur Performance
Animiere transform und opacity statt top, left, width oder margin, da diese bei jedem Frame ein neues Layout erzwingen. Setze will-change nur bei Elementen, die gleich animiert werden. Feile am Easing mit dem cubic-bezier-Generator, füge einen Spinner aus dem CSS-Loader-Generator hinzu und kombiniere Animationen mit Box-Shadows oder Verläufen.
Auch gesucht als: css hover effekte, hover animation css, button hover effekt, css hover generator, karten hover effekt, hover effekte css, css animation hover.
Passende Tools zu: CSS Hover-Animation Generator
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
- Glassmorphism Generator — Gestalte eine Milchglas-Karte mit Live-Reglern und kopiere browserübergreifendes CSS – mit dem -webkit-backdrop-filter-Präfix und einem Fallback für ältere Browser.
- Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
Häufige Fragen
Ist das generierte CSS kostenlos nutzbar?
Kann ich eine vorhandene Animation bearbeiten?
Wie starte ich die Animation, sobald das Element ins Sichtfeld scrollt?
animation-timeline: view() ohne JavaScript in Browsern, die das unterstützen.Funktioniert das mit Tailwind CSS?
tailwind.config.js und für v4 einen @theme-Block, sodass du die Animation als animate-*-Klasse verwenden kannst.Welche Eigenschaften eignen sich am besten für flüssige Animationen?
transform und opacity laufen über den GPU-Compositor und bleiben auch auf langsamen Smartphones flüssig. Weichzeichner, Schatten, Farben und Eckenradius kosten mehr Leistung, setze sie also sparsam bei großen Elementen ein.