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>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.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!!!
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__leSnakelePeekeffect3dleRainDroppepeleWaterWavelightningleJoltZoomtypingelectricitywipeopenleMagnifyleBeatleFadeInleFadeInLeftleFadeInRightleFadeInTopleFadeInBottomleFadeOutleFadeOutLeftleFadeOutRightleFadeOutTopleFadeOutBottomleMovingBackFromRightleMovingBackFromLeftleKickOutBehindleKickOutFrontleSkateXleSkateYleSkateXYleScaleXInleScaleXOutleScaleYInleScaleYOutleJump leAboundTopleAboundBottomleAboundLeft leAboundRight leFlyInTop leFlyInLeft leFlyInRight leFlyInBottom leFlyOutTop leFlyOutLeft leFlyOutRight leFlyOutBottom leDoorCloseLeft leDoorOpenRight leDoorCloseRight leDoorOpenLeft leHangAndDropLeft leHangAndDropRight leHangAndDropRight leRencontre lePulseShake leHorizontalShake leVerticalShake leMadMax leHorizontalTremble leVerticalTremble leCrazyCool leVibration lePushReleaseFrom lePushReleaseFromLeft lePushReleaseFromTop lePushReleaseFromBottom lePushReleaseTo lePushReleaseToTop lePushReleaseToBottom leFlipInTop leFlipOutTop leFlipInBottom leFlipOutBottom leElevateLeft leElevateRight leRollFromLeft leRollFromRight leRollFromTop leRollFromBottom leRollToLeft leRollToRight leRollToTop leRollToBottom leRotateSkateInRight leRotateSkateInLeft leRotateSkateInTop leRotateSkateInBottom leRotateSkateOutRight leRotateSkateOutLeft leRotateSkateOutTop leRotateSkateOutBottom leRotateXZoomIn leRotateXZoomOut leRotateYZoomIn leRotateYZoomOut leRotateIn leRotateOut leRotateInLeft leRotateOutLeft leRotateInRight leRotateOutRight leSpinInLeft leSpinInRight leSpinOutLeft leSpinOutRight leBlurInRight leBlurInLeft leBlurInTop leBlurInBottom leBlurOutRight leBlurOutLeftleBlurOutTop leBlurOutBottom 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 leDanceInBottom leDanceOutTop leDanceOutMiddle leDanceOutBottom One after one animation class name
oaoFadeIn oaoFadeIn oaoFadeOut oaoFadeOut oaoFlyIn oaoFlyIn oaoFlyOut oaoFlyOut oaoRotateIn oaoRotateIn oaoRotateXIn oaoRotateXIn oaoRotateXOut oaoRotateXOut oaoRotateYIn oaoRotateYIn oaoRotateYOut Block animation class name
fadeInfadeInLeftfadeInRightfadeInTopfadeInBottomfadeOutfadeOutLeftfadeOutRightfadeOutTopfadeOutBottommoveFromLeftmoveFromRightmoveFromTopmoveFromBottommoveToLeftmoveToRightmoveToTopmoveToBottomdoorCloseFromLeftdoorOpenFromRightdoorCloseFromRightdoorOpenFromLeftheartbeatSlowheartbeatFasthangOnLefthangOnRighthangAndDropLefthangAndDropRightpulseShakehorizontalShakeverticalShakemadMaxcoolHorizontalShakecoolVerticalShakequietMadvibrationpushReleaseFrompushReleaseFromLeftpushReleaseFromRightpushReleaseFromToppushReleaseFromBottompushReleaseTopushReleaseToLeftpushReleaseToRightpushReleaseToToppushReleaseToBottomflipXflipXZoomInflipXZoomOutflipYflipYZoomInflipYZoomOutskewLeftskewRightskewInLeftskewInRightskewOutLeftskewOutRightshockZoomshockInLeftshockInLeftshockInTopshockInBottompullReleaseInpullReleaseOutswingInLeftswingInRightswingInTopswingInBottomelevateLeftelevateRightrollFromLeftrollFromRightrollFromToprollFromBottomrollToLeftrollToRightrollToToprollToBottomrotaterotateXrotateXInrotateXOutrotateYrotateYInrotateYOutrotateInLeftrotateInRightrotateInToprotateInBottomrotateOutLeftrotateOutRightrotateOutToprotateOutBottomspinToLeftspinToRightspinToTopspinToBottomspinFromLeftspinFromRightspinFromTopspinFromBottomblurInblurInLeftblurInRightblurInTopblurInBottomblurOutblurOutLeftblurOutRightblurOutTopblurOutBottombounceFromTopbounceFromDownbounceXbounceYbounceZoomInbounceZoomOutbounceInTopbounceInLeftbounceInRightbounceInBottombounceOutTopbounceOutLeftbounceOutRightbounceOutBottomperspectiveToTopperspectiveToBottomzoomInzoomInLeftzoomInRightzoomInTopzoomInBottomzoomOutzoomOutLeftzoomOutRightzoomOutTopzoomOutBottomdanceTopdanceMiddledanceBottom