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.
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.
We also offer to you GreenSock animation, just fly over here to get the guideline.
To get started, from the outset you download the complete library or use a CDN hosted version by jsDelivr. All CDN URLs below:
- cssanimation.css: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css
- cssanimation.min.css: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/cssanimation.min.css
- letteranimation.js: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/letteranimation.js
- letteranimation.min.js: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/letteranimation.min.js
- cssanimation greenSock version: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/gsap-version/cssanimation-gsap.js
- cssanimation greenSock min version: https://cdn.jsdelivr.net/gh/yesiamrocks/[email protected]/gsap-version/cssanimation-gsap.min.js
- Include the
cssanimation.cssorcssanimation.min.cssstylesheet 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>- Now add the class
cssanimationand class of animation name likefadeInfor fade in animation to the element that you want to animate. For list of animation class name check out the home page
<!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>
<h1 class="cssanimation fadeIn"> Example </h1>
</body>
</html>- 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.jsbefore the body tag. Now add a letter animation class likeleFadeInfor letter fade in animation then must be addsequentialclass for to get an animation in sequence orrandomclass for animate randomly.
<!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>
<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>- You may also want to include the class
infinitefor an infinite loop.
<!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>
<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>Unlike all the other complicated vendors, our cssanimation.css is only 84kb with 300 animations, 165kb 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!!!
If cssanimation.io isn't doing what you expect it to please post a mail to [email protected] or create a issue
cssanimation.io is licensed under the MIT Licenses