DEV Community

Amrzlabs
Amrzlabs

Posted on

15 Copy-Paste CSS Animations You Can Add With One Word 🦋

Looking for:

  • CSS animations examples
  • CSS effects copy paste
  • HTML animation snippets
  • Cool website effects

Here are some fun animations you can add instantly.

No keyframes.

No JavaScript.

No configuration.

1. Bounce Animation ⚽

Perfect for buttons, icons and CTA sections.

<div bounce>⚽</div>
Enter fullscreen mode Exit fullscreen mode

2. Pulse Animation 💗

Makes elements softly grow and fade.

<div pulse>💗</div>
Enter fullscreen mode Exit fullscreen mode

Perfect for:

  • Like buttons
  • Notifications
  • Attention grabbing elements

3. Swing Animation 🧹 

<div swing>🧹</div>
Enter fullscreen mode Exit fullscreen mode

Adds playful movement.

Great for:

  • Icons
  • Decorations
  • Hero sections

4. Spin Animation 🌍 

<div spin>🌍</div>
Enter fullscreen mode Exit fullscreen mode

One of the most searched CSS effects.

Useful for:

  • Loading states
  • Logos
  • Decorative elements

5. Shake Animation 😵‍💫 

<div shake>😵‍💫</div>
Enter fullscreen mode Exit fullscreen mode

Perfect for:

  • Invalid forms
  • Error messages
  • Funny effects

6. Flip Animation 🃏 

<div flip>🃏</div>
Enter fullscreen mode Exit fullscreen mode

Adds instant interaction.

7. Grow Animation 🐣 

<div grow>🐣</div>
Enter fullscreen mode Exit fullscreen mode

Makes elements continuously expand.

8. Shrink Animation 🛰️ 

<div shrink>🛰️</div>
Enter fullscreen mode Exit fullscreen mode

Creates subtle breathing effects.

9. Slide X ↔️ 

<div slide-x>🚗</div>
Enter fullscreen mode Exit fullscreen mode

Moves elements horizontally.

10. Slide Y ↕️ 

<div slide-y>🎈</div>
Enter fullscreen mode Exit fullscreen mode

Perfect for floating decorations.

11. Floating Ball Effect ✨ 

<div ball-move-1></div>
Enter fullscreen mode Exit fullscreen mode

Creates glowing moving particles.

There are multiple versions:

<div ball-move-1></div>
<div ball-move-2></div>
<div ball-move-3></div>
<div ball-move-4></div>
<div ball-move-5></div>
Enter fullscreen mode Exit fullscreen mode

Perfect for:

  • Hero sections
  • Landing pages
  • AI websites
  • Portfolio backgrounds

12. Birthday Confetti 🎉 

<div birthday-paper>
Enter fullscreen mode Exit fullscreen mode

Creates falling paper effects.

Perfect for:

  • Birthday pages
  • Celebration screens
  • Success pages

13. Hand Drawn Effect 🎨 

<div handdrawn>
Enter fullscreen mode Exit fullscreen mode

Turns boring UI into sketch-style elements.

Popular searches:

  • hand drawn css
  • sketch website design
  • doodle ui

14. Flying Butterflies 🦋

Probably the weirdest one.

<div butterfly="fly"></div>
Enter fullscreen mode Exit fullscreen mode

This turns elements into tiny pink butterflies that fly around.

Perfect for:

🌸 Cute websites

🧸 Kids projects

🎨 Artist portfolios

✨ Easter eggs

15. Combine Them 😈

Why stop at one?

<div pulse handdrawn>
Enter fullscreen mode Exit fullscreen mode 
<div ball-move-3>
Enter fullscreen mode Exit fullscreen mode 
<div butterfly="fly"></div>
Enter fullscreen mode Exit fullscreen mode

Which One Is Your Favorite? 👀

  • Bounce ⚽
  • Pulse 💗
  • Swing 🧹
  • Floating Balls ✨
  • Butterflies 🦋

Keywords Developers Search Every Day

  • css animations examples
  • css effects copy paste
  • cool css effects
  • html animation examples
  • css snippets
  • website animation ideas
  • fun css effects
  • portfolio animation inspiration
  • landing page animations
  • hero section effects

All examples above are available in ,
Butterfly CSS a completely free and open source framework focused on making websites more fun.
please star our repo to encourage us continue:https://github.com/amrzlabs/butterflycss

Top comments (0)