If you’ve learned the basics of HTML and CSS, and you want to have some fun by creating cool CSS animations, check out animate.css. Animate.css is one of thousands of free code libraries that are available on the internet, to make your life a little easier. Code libraries (like animate.css) are basically just text files filled with code that somebody already wrote, and then decided to share with you. In our case, the file named animate.css is filled with CSS code that creates simple, fun animations that you can use on your web pages.
HOW TO USE ANIMATE.CSS
First, go to https://daneden.github.io/animate.css/ and download the animate.css file. While you’re there, take a moment to play with the various animations by clicking the “animate” button!
Now put animate.css into a folder on your computer. If you already have an HTML project that you’re playing around with, you can add animate.css to that folder; if not, go ahead and create a new folder, and put animate.css inside.
Next, open animate.css in your favorite text editor. If you haven’t used a specialized code-editor before, check out our tutorial on getting started with atom.io, and come back to this tutorial when you’ve got Atom set up on your computer.
Take a look at the code in animate.css. It’s really very simple and easy to read if you’ve got some familiarity with CSS. If you want to test your CSS skills, give yourself a few minutes at this point to try to use animate.css to create an animation or two. Or you could just continue reading this tutorial…
Create an HTML file in the same folder as animate.css. You can call it index.html, animationTest.html, or anything else that you might desire, as long as it ends in .html. Put in a basic HTML boilerplate (you can find one at the end of this tutorial) so that you can start making some animation magic.
In the <head> section, link your HTML file to the animate.css file. Your code should look something like this: <link rel=”stylesheet” type=”text/css” href=”animate.css”>
Now, in the <body> section, create an HTML element that you will want to animate. Let’s use this image, for example: <img src=”https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624×3561.jpg” />
Save your HTML file, and then double-click it (in the folder) to open it in your browser. You should now see a blank page with a single image on it.
Let’s take a quick look at the CSS code, to get a sense for how to use it. Opening the file, you’ll notice that the first class defined is .animated, which essentially just gives any HTML element the general, basic CSS code it will need in order to be animated. If you look further down in the file, you’ll see all kinds of CSS animations, from .bounce to .pulse to .fadeOutRightBig. These are specific animations that you can use as you please. So all you’ll need to do in order to animate your boring, static image is add a couple of classes to it! Every image (or other HTML element) that you want to animate must receive the .animated class. Then you can choose any animation (.pulse, for example) and add that class to your image as well.
So let’s make some magic! Add the .animated and the .pulse classes to your image. Your code should look something like this: <img src=”https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624×3561.jpg” class=”animated pulse” /> Now save the HTML file, and reload it in your browser. Viola! Your image pulses with life! But that’s boring, right? It only pulsed once, and then went back to being a plain old static image. Well, if we add the .infinite class, the image will keep pulsing forever! Try it now; your code should look something like this: <img src=”https://fvi.edu/wp-content/uploads/2015/12/CSS3_Logo_512-624×3561.jpg” class=”animated infinite pulse” />
For now, have fun creating CSS animations with animate.css, and happy coding!
BASIC HTML BOILERPLATE