Spice up your website with Animate CSS

Share:
Source Code

Demo:  https://www.penta-code.com/demo/animatecss/

In this quick video I’m going to show you how you can apply fun CSS animations to any element on your website.  The magic behind this is the excellent Animate.css library by Daniel Eden.

To add animate.css to your project, you can either copy and paste the raw css from https://raw.githubusercontent.com/daneden/animate.css/master/animate.css to your project, or you can run

npm install animate.css --save

then all you need to do is to add a class name to any element of your choice, the format is animated [name of animation] for example:

<div class="my-div animated bounce">Bouncing ball</div>

will make the div named my-div animate with the bounce effect.

Comments Or Questions? Discuss In Our Discord

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

Category: Beginner
Posted by

I like to build things, and like it even more when others find them useful. Founder of @pentacovids. Follow me on Twitter @whyzhi

You Might Also Like