BH0's Blog

How To Use AnimateCSS

2018-01-08

What is animate CSS?

Animate CSS is a library of CSS animations made using the keyframe rule, typically used for animating HTML elements / tags - especially text, thus allowing the website to feel much more alive and interactive - there are various animations designed to attract the users attention. They also keep the user amused during loading time - funilly enough, my 2017 - 2018 blog which is (or was depending on when you�re reading this) powered by Hexo uses Animate CSS.

There are a variety of animations and I�m only going to explore a few of them if but you can get a demo of each animation via the AnimateCSS website. You can use it with just about any other tool you like too. (

You can include AnimateCSS in your website using various methods, you can install / download it and place the source code within your project, or you could browse through the source code (on Github) and pick the animations you like and insert only the ones you want into your website (thus you won�t be bloating it up with unused code) - this will mean you can modify the animations to your liking. You can even use a package manager but since I�m feeling lazy I�m just going to include it via CDN. And I will only be using standard syntax CSS so no specified browser support.

Basic HTML Usage

1
2
3
4
5
6
7
8
9
10
11
 
<html> 
	<head> 
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">		
	</head> 
	</head> 
	<body> 
		<h1 class="animated bounce"> Bounces so many times on load </h1> 
		<h2 class="animated infinite bounce"> Bounces forever </h2> 
	</body> 
</html>

Here we are simply specifying the class by assigning the class to our desired tag to be animated. Notice we can have some control over the behavior just by specifying a class (such as infinite). This method isn�t very flexible. The class animated just lets AnimateCSS code know that this intends to use an animation from the library.

CSS Usage (and Preprocessor)

Lets first look at a simple animation CSS code to see what is really going. You can look at Animate.css file in the Github repository or via source folder (then the specific file you want to examine). Notice that the animations are categorized - this should help when it comes to picking an appropriate animation. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
@keyframes swing {
 20% {
   transform: rotate3d(0, 0, 1, 15deg);
 }
 40% {
   transform: rotate3d(0, 0, 1, -10deg);
 }
 60% {
   transform: rotate3d(0, 0, 1, 5deg);
 }
 80% {
   transform: rotate3d(0, 0, 1, -5deg);
 }
 to {
   transform: rotate3d(0, 0, 1, 0deg);
 }
}
.swing {
 transform-origin: top center;
 animation-name: swing;
}

All that is really happening here within the keyframe rule is that a time unit is being set to percentage - which means that 10% will be 10% of however long the animation is intended to last for, and 50% is halfway through, and basically at a specific time interval (the percentage) the animation�s position will be changed. The time unit can be something other than percentage but percentage is very flexible. 0% is (from) when the animation is first triggered and 99% is just before (to or until) the animation ends. I plan on doing a tutorial which teaches how to make custom animations which will hopefully better you understanding. The last part - the �swing� class including the animation name essentially just allows us to refer to this animation as �swing�. 

1
2
3
4
5
6
7
8
9
10
 
<style> 			
.Paragraph:hover { 
	animation: swing; 
	animation-duration: 10s; // animation will last for 10 seconds 
} 
</style> 
<p class="Paragraph"> 
	LOREM LOREM 
</p>

We can simply target a class (or ID), give it an animation belonging to the Animate CSS library and if we like, set its behavior such as the duration (speed) of the animation and so on. And we can even have it so that the element / tag is animated on an event such as a mouse-hover. 

1
2
3
4
 
#uniqueParagraph { 
			animation: fadeInUp 10s infinite, bounce 2s infinite; 
		}

Want one after the other? No problem! I must admit that I tried making a custom keyframe animation which combines some of the animations but it didn�t seem to work. If you�re using a preprocessor you could use some fancy logic to control your web-page liveliness. Similar to how we will do so with Javascript.

Javascript / JQuery Usage

Now for the funnest part, Javascript. Basically the secret here is toggling the class when we want the animation to happen, for example, if the user clicks on an item - we will toggle an element with a class belonging to the AnimateCSS library and then remove it when we feel appropriate (so we can re-toggle it again). 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<button id="makeTextBounce" onclick="bounceText()">Make text bounce </button> 
<p id="test"> This text is going to bounce when the button above is clicked. </p> 
<div id="animateRedDiv" style="border:2px solid black;"> 
	Click me to animate the red div 
</div> 
<div id="redDiv" class="redDiv" style="background-color:red;"> 
	This will be animated when the other div is clicked 
</div> 
<script> 
	/// No JQuery 
	function animate(elementString, animation) { 
		// get the element passed as a parameter 
		var element = document.getElementById(elementString); 
		// add animated + our desired animation which was passed as the second parameter 
		element.className += " animated "+animation; 
		// wait for 1000 *time-unit* 
		var wait = setTimeout(function() { 
			// then remove the className thus stopping the animation 
			element.className -= " animated "+animation; 
		}, 1000); 
	} 
	
	var button = document.getElementById("button"); 
	function bounceText() { 
		animate('test', 'bounce infinite'); 
	} 
	
	
	document.getElementById("animateRedDiv").addEventListener("click", function(e) { 
		animate("redDiv", "fadeInUp infinite"); 
	});
	
	/// JQuery 
	function JqAnimate(element, animation) { 
		// target element + add class which will be the animation 
		$(element).addClass(' animated '+animation); 
		var wait = setTimeout(function() { 
			// remove the class thus ending the animation 
			$(element).removeClass(' animated '+animation); 
		}, 1000); 
	} 
		
	$(document).ready(function(){ 
		$('#animateRedDiv').click(function(){
			JqAnimate('#redDiv', 'bounce infinite'); 
		}); 
	});			
</script>

Don�t forget to comment out / remove the JQuery version if you want the Javascript version vice versa. I�m going to assume to understand what this code (hopefully the comments help) but basically any time we want to do something with animationCSS we simply call our trusty animate (or JqAnimate) function. Theoretically you could extend this to use more than just AnimateCSS. You can then go on to use event handlers, timers and other logic to make your website do all kinds of fancy stuff.

While having knowledge of CSS animations is helpful for using AnimateCSS - as hopefully proven by this tutorial - CSS animation knowledge is not required.

About

A technology blog.

Archives

Elsewhere

  1. GitHub
  2. Twitter