DEV Community

Cover image for Animating my illustration using animate.css
Aneeqa Khan
Aneeqa Khan

Posted on

Animating my illustration using animate.css

Hi folks! few months ago I created a boombox illustration by only using css.

Now I am looking forward to animate it.

As I am new to animation. I researched a little and found about animate.css. I decided to use it instantly because its pretty simple and easy. Like you animate your component with just one line of code.

So basically I wanted to animate the speakers as showing beat effect. For this I added this class to my inner speaker div.

className="animate__animated animate__heartBeat animate__fast animate__infinite"
Enter fullscreen mode Exit fullscreen mode

here I used heartBeat animation type and specifies its speed as fast for infinite time.
and here is the result


I know its pretty raw right now and I am working on it still. My idea is to add music notes floating around and on and off button to start and stop the music.
Also It will be helpful if you suggest me animation articles or tutorials in comments.

Thanks for reading and keep creating! ✨

Discussion (16)

Collapse
nithish_13 profile image
Nithish Kumar

Awesome 💥

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
nithish_13 profile image
Nithish Kumar • Edited on

Here is what I had done from your illustration with only CSS.

html-css-nuggets.vercel.app/ :)

Thread Thread
aneeqakhan profile image
Aneeqa Khan Author

wow nice!

Collapse
omdev74 profile image
om dev

It looks great

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
srini profile image
Sri-Ni, Thirumalaa Srinivas

Good work Aneeqa.
Look into learning native animation techniques using MDN, if you haven't already.
developer.mozilla.org/en-US/docs/W...

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you! I'll def see this

Collapse
jesusemen profile image
Jesusemen Ehimiyein

Great work Anneqa

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
imtiyaz profile image
Mohammed Imtiyaz

Super Cool!

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
cuellar22 profile image
RAUL CUELLAR MORENO

Good job
I want ser the next step with music notes flying

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you! yesss I am excited to try this...

Collapse
miralo profile image
Michele Mirandola

Hi Aneeqa, awesome work! :-)

I discovered cssanimation.rocks/ few times ago following an animation course and I found it helpful. It also has a newsletter with examples, inspirations etc...

Collapse
aneeqakhan profile image
Aneeqa Khan Author

Thank you so much for sharing. I'll def check it