DEV Community

Cover image for make butterfly animation without writing any css or js
Amrzlabs
Amrzlabs

Posted on

make butterfly animation without writing any css or js

Want to make your elements turn into a butterfly? 🌸 Forget about long class names or messy JavaScript. We just launched the most elegant update for Butterfly CSS.

πŸ¦„ What’s the Big Deal?

Most libraries force you to use class="...". But Butterfly CSS is different. We use the power of HTML Attributes. To make any element change to flying butterfly , you just add one simple word to your HTML tag:

butterfly="fly"

That’s it! No classes to remember, no scripts to load, and no CSS properties to tweak. It’s like giving your HTML "wings" directly! πŸ•ŠοΈ

πŸ’Ž Why you’ll LOVE this:

  • Super Clean HTML: Keep your code neat and professional. 🫧
  • Attribute Power: Uses the smart [butterfly="fly"] selector logic. 🧠
  • Zero Effort: If you can dream to "fly", you can fly! ✍️
  • Lightweight: Ultra-fast performance with a premium look. ⚑

πŸ› οΈ How it looks:

<div butterfly="fly"> I’m a butterfly now! πŸ¦‹ </div>
Enter fullscreen mode Exit fullscreen mode

Perfect for:

  • Adding "life" to your landing pages. πŸƒ
  • Surprising your visitors with organic movement. 😲

Butterfly CSS is turning the web into a garden. Grab the update and let your creativity fly! πŸš€

Want more magical animation?
Visit our website; it’s completely free and 0 setup:

get cdn or download it (40kb)(v4) from here its free forever without limits:
https://butterflycss.amrzlabs.com/docs

animation #css #html #javascript

Top comments (0)