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)