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. You can animate any element with our relevant animation class name [click here to see all the animation class names]. So include the cssanimation.css stylesheet from jsDelivr CDN or Download and let’s get started with this library.

Step 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="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css" rel="stylesheet">
</head>
<body>

</body>
</html>

Step 2: Now just add the class cssanimation and name of the class of animation ex: fadeIn for fade in animation to the HTML element that you want to be animated. [For list of animation class name check out the home page 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="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css">
</head>
<body>

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

</body>
</html>

Letter Animation: If you are looking for letter animation, there are two versions of letter animation available in our library. One is the sequential letter animation and the other one is random letter animation. We must let you know that, this is an exclusive feature of our library that only we offer. Now, to create the letter animation follow the instructions

You just need to add the file letteranimation.js right before the body tag ending. Now, to animate letters individually, just add class names to the HTML element, ex: leFadeIn class for the fade in animation to the individual letters. Now remeber, You must add sequential class for the animation to be in sequence or random class to 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="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css">
</head>
<body>

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/letteranimation.min.js"></script>
</body>
</html>

Step 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="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css">
</head>
<body>

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/letteranimation.min.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 [email protected] 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