Sign up for Digital Ocean VPS and get $10 credit FREE!

Spice up your website with Animate CSS1 min read

Source Code

Demo:  http://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.

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

Related Posts

Webdev News

Loading...
    More News