This library is not only built for CSS, it supports Greensock as well. Greensock is the standard JavaScript Animation framework in the world. It can help you to animate your HTML elements.
This is absolutely easy to have your HTML elements animated by our Greensock version. After include all the files just add your desired class name.
So why worried? [ Download ] and let’s get started with this library.
please follow the instruction below
First, you download or grab the CDN URL of TweenMax.js plugin from [ GreenSock ] and download cssanimation.io's GSAP script cssanimation-gsap.js from [ cssanimation.io ]
1. Now include the TweenMax.min.js and cssanimation-gsap.js before the body tag like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</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>
</head>
<body>
<h1 class="cssanimation fadeIn"> Example </h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</body>
</html>3. And if you want letter animation, Just add a letter animation class like leFadeIn for fade in animation. And now gsap version support only sequential animation. But no worries about random animation, We are working on it. Very soon you'll get the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
</head>
<body>
<h1 class="cssanimation leFadeIn"> Example </h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</body>
</html>It's that easy! 😀
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.
Unlike all the other complicated vendors, our cssanimation-gsap.js is only 44kb with 224 animations, 33kb in the minified version and only 5kb when compressed.
Extremely light weight!!! 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 on Github
cssanimation.io is licensed under the MIT Licenses
Letter animation class name
hu__hu__leSnakeeffect3dleRainDropleFadeInleFadeInLeftleFadeInRightleFadeInTopleFadeInBottomleFadeOutleFadeOutLeftleFadeOutRightleFadeOutTopleFadeOutBottomleSkateXleSkateYleSkateXYleScaleXInleScaleXOutleScaleYInleScaleYOutleJump leAboundTopleAboundBottomleAboundLeft leAboundRight leFlyInTop leFlyInLeft leFlyInRight leFlyInBottom leFlyOutTop leFlyOutLeft leFlyOutRight leFlyOutBottom leDoorCloseLeft leDoorCloseLeft leDoorOpenRight leDoorCloseRight leHorizontalShake lePushReleaseFrom lePushReleaseFromLeft lePushReleaseFromTop lePushReleaseFromBottom lePushReleaseTo lePushReleaseToTop lePushReleaseToBottom leFlipInTop leRollFromLeft leRollFromRight leRollFromTop leRollFromBottom leRollToLeft leRollToRight leRollToTop leRollToBottom leRotateXZoomOut leRotateYZoomIn leRotateYZoomOut leRotateIn leRotateOut leRotateInLeft leRotateOutLeft leRotateInRight leRotateOutRight leSpinInLeft leSpinInRight leSpinOutLeft leSpinOutRight lePopUp lePopUpLeft lePopUpRight lePopOut lePopOutLeft lePopOutRight leBounceFromTop leBounceFromDown leBounceY leBounceZoomIn leBounceZoomOut lePerspectiveOutTop lePerspectiveOutBottom leZoomIn leZoomInLeft leZoomInRight leZoomInTop leZoomInBottom leZoomOut leZoomOutLeft leZoomOutRight leZoomOutTop leZoomOutBottom leDanceInTop leDanceInMiddle Block animation class name
fadeInfadeInLeftfadeInRightfadeInTopfadeInBottomfadeOutfadeOutLeftfadeOutRightfadeOutTopfadeOutBottommoveFromLeftmoveFromRightmoveFromTopmoveFromBottommoveToLeftmoveToRightmoveToTopmoveToBottomdoorCloseFromLeftdoorOpenFromRightdoorCloseFromRightdoorOpenFromLeftheartbeatSlowheartbeatFasthangOnLefthangOnRighthangAndDropLefthangAndDropRightpulseShakehorizontalShakeverticalShakemadMaxcoolHorizontalShakecoolVerticalShakequietMadvibrationpushReleaseFrompushReleaseFromLeftpushReleaseFromRightpushReleaseFromToppushReleaseFromBottompushReleaseTopushReleaseToLeftpushReleaseToRightpushReleaseToToppushReleaseToBottomflipXflipXZoomInflipXZoomOutflipYflipYZoomInflipYZoomOutskewLeftskewRightskewInLeftskewInRightskewOutLeftskewOutRightpullReleaseInpullReleaseOutelevateLeftelevateRightrollFromLeftrollFromRightrollFromToprollFromBottomrollToLeftrollToRightrollToToprollToBottomrotaterotateXrotateXInrotateXOutrotateYrotateYInrotateYOutrotateInLeftrotateInRightrotateInToprotateInBottomrotateOutLeftrotateOutRightrotateOutToprotateOutBottomspinToLeftspinToRightspinToTopspinToBottomspinFromLeftspinFromRightspinFromTopspinFromBottomblurInblurInLeftblurInRightblurInTopblurInBottomblurOutblurOutLeftblurOutRightblurOutTopblurOutBottombounceFromTopbounceFromDownbounceXbounceYbounceZoomInbounceZoomOutbounceInTopbounceInLeftbounceInRightbounceInBottombounceOutTopbounceOutLeftbounceOutRightbounceOutBottomperspectiveToTopperspectiveToBottomzoomInzoomInLeftzoomInRightzoomInTopzoomInBottomzoomOutzoomOutLeftzoomOutRightzoomOutTopzoomOutBottomdanceMiddledanceBottom