🎨 Mastering Animations in Butterfly CSS
Published on August 31, 2025
Animations make websites lively and engaging. With Butterfly CSS, you can create stunning effects effortlessly. This guide explores animations documentation and examples, and links to the GitHub repository.
✨ Standard Animations
Continuous motion effects for lively UIs:
- 🔄 spin – Rotates elements continuously.
- 🦘 bounce – Bounces vertically.
- 💓 pulse – Grows and fades in/out.
- 🎯 swing – Wobbles side to side.
- ✨ fadein – Fades in while sliding up.
- 🔁 flip – Flips horizontally.
- 💥 shake – Shakes horizontally.
- 📈 grow – Grows and shrinks continuously.
- 📉 shrink – Shrinks and grows continuously.
- ↔️ slide-x – Slides left and right.
- ↕️ slide-y – Slides up and down.
🌈 Coloring Animations
Animated background color changes that make elements pop:
- 🎨 coloring – Generic background animation changing every second.
- 🎨 coloring-1 – Unique 3-color animation.
- 🎨 coloring-2 – Green → Yellow → Orange.
- 🎨 coloring-3 – Red → Cyan → Light Purple.
- Continue through coloring-4 to coloring-50 for more color combos.
🎈 Floating Ball Animations
Glowing balls floating across elements, creating dynamic visual effects:
- 💫 ball-move-1 – Glowing ball with specific path and speed.
- 💫 ball-move-2 – Different trajectory and speed.
- 💫 ball-move-3 – Larger glowing ball.
- 💫 ball-move-4 – Smaller, faster-moving ball.
- 💫 ball-move-5 – Big, slow-moving glowing ball.
🌟 Special Effects
Unique visual enhancements for extra flair:
- 🎉 birthday-paper – Confetti falling animation.
- 💡 lightfouce – Spotlight effect to emphasize content.
- ✏️ handdrawn – Sketchy, hand-drawn look.
- 💨 blur – Soft blur effect for focus areas.
Combine these attributes to create engaging, playful, and professional animations with Butterfly CSS. Check the full docs or visit the GitHub repo to explore more!