In this documantation we discussed about cssanimation.io's CSS version which professional-grade animation library for the modern web. If you want cssanimation.io's animation by GreenSock, Please check our another documantation, which will guide you about the GreenSock.
With cssanimation.io, all you have to do is to include the appropriate classes with your elements. The method of including the CSS version is outlined below:
To get started, from the outset you download the complete library and then
- Include the
cssanimation.css
orcssanimation.min.css
stylesheet into the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="cssanimation.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>
- Now add the class
cssanimation
and class of animation name likefadeIn
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 in codepen title red block section from below or click here ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="cssanimation.min.css">
</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.js
before the body tag. Now add a letter animation class likeleFadeIn
for letter fade in animation then must be addsequential
class for to get an animation in sequence orrandom
class for animate randomly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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">
</body>
</html>
- You may also want to include the class
infinite
for an infinite loop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="cssanimation.min.css">
<script type="text/javascript" src="letteranimation.js">
</head>
<body>
<h1 class="cssanimation fadeIn infinite"> Example </h1>
</body>
</html>
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