Instant CSS
Tools
Templates
Components
Learn
More
Swing
Animation
A swinging pendulum effect.
Reset to Default
HTML
Copy HTML
<div class="swing-box">Swing</div>
CSS
Copy CSS
.swing-box { width: 80px; height: 80px; background: #ec4899; color: white; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-family: sans-serif; animation: swing 1s infinite alternate; transform-origin: top center; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } }
Live Preview
Swing
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.