Instant CSS
Tools
Templates
Components
Learn
More
Float
Animation
A gentle hovering motion.
Reset to Default
HTML
Copy HTML
<div class="float-box">Float</div>
CSS
Copy CSS
.float-box { width: 100px; height: 60px; background: #8b5cf6; color: white; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: sans-serif; animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
Live Preview
Float
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.