Fork me on GitHub

Getting started with cssanimation.io

In modern web concept, cssanimation.io is the best controlling animation library for CSS and Greensock. Moving forward with this library, you need to have a basic idea on HTML and CSS3. We believe you have that. If you are pretty confused, just refreshing your idea from here to go along more easily.

We also offer to you Greensock animation, just fly over here to get the guideline.

This library is too easy to install and implement. Anything you can be done with our relevant animation class name. So Download and let’s get started with this library.

1. Include the cssanimation.css or cssanimation.min.css stylesheet into the head.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
<link href="cssanimation.min.css" rel="stylesheet">
</head>
<body>

</body>
</html>

2. Now add the class cssanimation and class of animation name like fadeIn for fade in animation to the element that you want to animate. [For list of animation class name check out the home page or check the codepen title red block section from below or click here ]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
<link rel="stylesheet" href="cssanimation.min.css">
</head>
<body>

<h1 class="cssanimation fadeIn"> Example </h1>

</body>
</html>

3. And if you want letter animation, There are two versions here. One is the sequential and the other is random animation. Just add the file letteranimation.js before the body tag. Now add a letter animation class like leFadeIn for letter fade in animation then must be add sequential class for to get an animation in sequence or random class for animate randomly.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
<link rel="stylesheet" href="cssanimation.min.css">
</head>
<body>

<h1 class="cssanimation leFadeIn sequence"> Example </h1>
<h1 class="cssanimation leFadeIn random"> Example </h1>

<script type="text/javascript" src="letteranimation.js"></script>
</body>
</html>

4. You may also want to include the class infinite for an infinite loop.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
<link rel="stylesheet" href="cssanimation.min.css">
</head>
<body>

<h1 class="cssanimation fadeIn infinite"> Example </h1>

<script type="text/javascript" src="letteranimation.js"></script>
</body>
</html>

Every animation live from the codepen

Here as you can see how you can work and modify each animation from the CODEPEN You can also download them in a ZIP file by clicking the download button.

loading spin icon

Extremely light weight

Unlike all the other complicated vendors, our cssanimation.css is only 84kb with 300 animations, 170kb in the minified version with all prefix and only 10kb when compressed.
And the letteranimation.js only 3kb, with 1kb in the minified version and only 0.6kb when compressed.

Hard to believe it!!! We know, Believe it!!!

Having trouble?

If cssanimation.io isn't doing what you expect it to please post a mail to hello@cssanimation.io or create a issue on Github

License

cssanimation.io is licensed under the MIT Licenses

×
Download Full Library Download From GitHub
Close This Panel

Letter animation class name

One after one animation class name

Block animation class name