How To Use Animate.css
In a recent battle with the “Just-add-water CSS Animations” plugin, Animate.css, I was a little distressed to find no documentation on the site.It got to the point where I was flipping through multiple Google searches just looking for something basic. With that in mind, I thought we’d just start the process here to get you started using the Animate.css plugin.
Step 1: Download/Upload the pluginThis one is pretty simple. Click on the “Download on Github” link on the page, or click this link to visit the animate.css github page. If you know what a .min.css file is, go right ahead and just use that version. If you don’t, click on the animate.css link in the middle of the page to access it’s set of coding.
After clicking animate.css you’ll be taken to another GitHub page with options along the top. From here, click Raw. This will load the plugin’s full coding spectrum in basic text format. From here, you can copy and paste this into a file called animate.css, or simply go to File > Save Page As.
Obviously save the file to someplace on your computer that you’ll actually be able to find it again. With the file downloaded locally on your system, you’re now ready to upload the file to your FTP server. If you do not know how to do this, just…just stop reading this tutorial. No problem helping you out, but uploading to a server is 100 level stuff which we’re not covering here.
Step 2: Add the Plugin To Your PagesSame as you would load in any kind of file (css, js, etc.), we’re going to need to place a call to the file within the head of your HTML page (or your header.php include).
Note: Animation must be added to elements that have a height and width. For instance, adding it to an <a> tag that has an element floated within it isn’t going to be of much use. You need to have something for it to actually animate.To add animation, we’re simply going to add a class to the element. So if we have:
If you’re having problems, create a copy of your page and start deconstructing it. Remove all of the elements you’re not working with it to at least get this working in it’s most basic form. If it’s still not working, then you’ll need to begin to check things like the site path and more.
Easiest way to check the site path is to view the source of the page. Most browsers these days will create links out of any external file references on the page. Click on the animate.css link from within the view source view. If it looks like you’re loading a 401 page instead of the Raw code we copied over, it’s possible your file isn’t linked correctly, or you forgot to upload it.
Step 4: Create a Hover/Click EventUnless we want our page going nuts when it first loads up, it’s possible we want to control these animations either on hover or click. You can find a full video tutorial documenting a setup procedure, as well as these original functions over at Jose Browne’s Online Playground.
Inline markup isn’t going to always be the prettiest and goes against our basic rules of separation between content, presentation and functionality. Jose has created the following 2 functions specifically for Animate.css integration. Copy and paste one, or both, of these scripts onto your page; or, into a scripts.js file if you’re trying to keep everything neatly organized.
Initiate Animation on Hover
Initiate Animation on Click