Call Us Today!

Blog

css animations

Make cool CSS animations with animate.css

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” />

Now that you’ve learned how to use the animate.css library to create fun CSS animations in seconds, it’s up to you to put it to good use in your own web pages! If you know how to use JavaScript/jQuery, you can trigger these animations whenever you want; when a viewer scrolls past an image, when the mouse moves over the image, when the viewer presses a certain key, etc. You can even trigger these animations on :hover events with basic CSS. But that’s a tutorial for another time.

For now, have fun creating CSS animations with animate.css, and happy coding!

BASIC HTML BOILERPLATE

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title></title>
</head>
<body>

</body>
</html>

No Waiting list! Start your journey today!

FVI School of Nursing and Technology has NO waiting list and three start dates a year so you can begin nursing school when you're ready

Schedule a Career Planning Session

  • By clicking "Request Info", you agree for FVI School of Nursing and Technology to contact you using our autodialer, text, pre-recorded message, via telephone or mobile device (including SMS and MMS) and email, even if your number is currently listed on any state, federal or corporate "Do Not Call list".