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

Creating illustration using CSS

Aneeqa Khan ・ Dec 15 '20

#css #react #beginners

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"

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! ✨