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"
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! ✨
Top comments (16)
Awesome 💥
Thank you!
Here is what I had done from your illustration with only CSS.
html-css-nuggets.vercel.app/ :)
wow nice!
It looks great
Thank you!
Good work Aneeqa.
Look into learning native animation techniques using MDN, if you haven't already.
developer.mozilla.org/en-US/docs/W...
Thank you! I'll def see this
Great work Anneqa
Thank you!
Super Cool!
Thank you!
Good job
I want ser the next step with music notes flying
Thank you! yesss I am excited to try this...
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...
Thank you so much for sharing. I'll def check it