float suspend hover ambient loop motion Hero-Dekorationselemente und Illustrationen Schwebende UI-Cards und Badge-Elemente Ambient-Motion für statische Seiten Statische Hero-Dekorationen wirken leblos Einfache Schwebe-Animation ohne komplexes JS
Float Suspend
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/float-suspend.json Hello, World
This element animates in
Background
Customize
Quick Start
<div class="float-suspend">🚀</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 403 bytes · 22 lines
- Custom Properties
-
--suspend-y--suspend-x--suspend-duration - Classes
-
.float-suspend
float suspend hover ambient loop motion
Endlose sanfte Schwebanimation. Konfigurierbar über --suspend-y (vertikal, Standard -8px), --suspend-x (horizontal, Standard 0) und --suspend-duration (Standard 3s).