CSS web development

A Quick Look At Animate.css

3 July 2013
Anthony Mills

css3I was browsing github today when I came across the very interesting Animate.css repository. Animate.css provides a bunch of cool cross browser CSS3 based ย animations under an MIT licence that you can use in your own projects with minimal effort.

First things first you need to get a copy and depending how you want to use it, you can either build a custom package here, that only contains the effects you are after (hover over the text titles to see each effect in action!). Or if size isn’t an issue and you just want to play around simply clone a copy of the complete code base from github repository. From here its pretty easy to get started, just include the Animate.css style sheet into your page and then add the desired classes to your elements as you require.

Below I have created a basic html document to demonstrate a provided “hinge” effect on an element containing some text. The Animate.css style sheet has simply been added in the head of the document. I am also loading jQuery so that when a visitor clicks the hingeElement the animate and hinge classes are then dynamically added to the element:

[codesyntax lang=”html4strict” title=”Animate.css Hinge Text Element”]

<!doctype html>
<html lang="en">

	<head>
		<link rel="stylesheet" href="css/animate-custom.css" />
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
                <title>Animate.css: Hinge element example</title>
		<style type="text/css">
			#hingeElement {
				width: 300px;
				margin: auto;
			} 

			#hingeElement:hover {
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<h2>Animated Hinge</h2>
		<div id="hingeElement">
			<p>This is some test text for the page.</p> 
		</div>

		<script type="text/javascript">
			$("#hingeElement").click(function() {
				$('#hingeElement').addClass('animated hinge');
			});		
		</script>
	</body>	
</html>

[/codesyntax]

You can see a proper demo of the code in action here.

In the next one I attached a handler to the click event same as before but I have put an image into the element and am using the flip animation instead.

[codesyntax lang=”html4strict”]

<!doctype html>
<html lang="en">

	<head>
		<link rel="stylesheet" href="css/animate-custom.css" />

		<title>Animate.css: Flip image example</title>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

		<style type="text/css">
			#flipElement {
				width: 650px;
				margin: auto;
			} 

			#flipElement:hover {
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<h2>Animated Flip</h2>
		<div id="flipElement">
			<img src="images/sydney_sunset.jpg" alt="Picture of Sydney sunset" />
		</div>

		<script type="text/javascript">
			$("#flipElement").click(function() {
				$('#flipElement').addClass('animated flip');

			});		
		</script>
	</body>	
</html>

[/codesyntax]

A demonstration of this example can also be seen here.

With 53 different effects, you can use Animate.css is a great way to quickly and easily add some eye candy to your sites with CSS3 animations.

Further Reading: