GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → yesiamrocks → Cssanimation.io

yesiamrocks / Cssanimation.io

Licence: mit
CSS Animation Library for Developers and Ninjas

Labels

cssanimationtransitioncss-animations

Projects that are alternatives of or similar to Cssanimation.io

Css Animations Pocket Guide
A pocket guide to get started writing CSS Animations. ✨
Stars: ✭ 94 (-46.59%)
Mutual labels:  transition, css-animations
Easytransform
Enhancing CSS transform with a little bit of JavaScript.
Stars: ✭ 10 (-94.32%)
Mutual labels:  transition, css-animations
Aicustomviewcontrollertransition
Easy and tidy way for creating custom UIViewController transitions for iOS
Stars: ✭ 130 (-26.14%)
Mutual labels:  transition
Starwars.android
This component implements transition animation to crumble view into tiny pieces.
Stars: ✭ 1,942 (+1003.41%)
Mutual labels:  transition
Mimic.css
Everyone else is doing it!
Stars: ✭ 144 (-18.18%)
Mutual labels:  css-animations
Css Animation 101 Cn
学习如何为你的 Web 程序添加动效
Stars: ✭ 132 (-25%)
Mutual labels:  transition
Kwdrawercontroller
Drawer view controller that easy to use!
Stars: ✭ 154 (-12.5%)
Mutual labels:  transition
Thegoodman
An experiment with basic CSS3 animations.
Stars: ✭ 128 (-27.27%)
Mutual labels:  css-animations
React Reveal Text
✨ A small react library for animating the revealing of text.
Stars: ✭ 171 (-2.84%)
Mutual labels:  transition
Cpcollectionviewkit
Interesting UICollectionView layouts and transitions
Stars: ✭ 140 (-20.45%)
Mutual labels:  transition
Aisphereview
A wonderful 3D animation
Stars: ✭ 160 (-9.09%)
Mutual labels:  transition
Animatopy
🎩 Just-add-water simple CSS animations snippets
Stars: ✭ 137 (-22.16%)
Mutual labels:  css-animations
Transitionhelper
This is a simple util to create Activity transition animation
Stars: ✭ 1,653 (+839.2%)
Mutual labels:  transition
React Site Nav
A kick ass site menu powered by styled components inspired by Stripe.
Stars: ✭ 155 (-11.93%)
Mutual labels:  css-animations
React Number Easing
React component for fancy number transitions.
Stars: ✭ 131 (-25.57%)
Mutual labels:  transition
Materialtransitionanimation
Material Animations practice which is inspired from
Stars: ✭ 165 (-6.25%)
Mutual labels:  transition
Googlenewsstandanimation Android
Navigation pattern like in Google News Stand app with transitions
Stars: ✭ 130 (-26.14%)
Mutual labels:  transition
Gganimate
A Grammar of Animated Graphics
Stars: ✭ 1,744 (+890.91%)
Mutual labels:  transition
Layerjs
layerJS: Javascript UI composition framework
Stars: ✭ 1,825 (+936.93%)
Mutual labels:  transition
Transitioner
A library for dynamic view-to-view transitions
Stars: ✭ 2,049 (+1064.2%)
Mutual labels:  transition
View All Similar Projects ➔

Getting started with cssanimation.io

GitHub license

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:

Usage

  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>
  1. 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 
<!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>
  1. 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 like leFadeIn for letter fade in animation then must be add sequential class for to get an animation in sequence or random class 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>
  1. 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 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>

Extremely light weight

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!!!

Having trouble?

If cssanimation.io isn't doing what you expect it to please post a mail to [email protected] or create a issue

License

cssanimation.io is licensed under the MIT Licenses

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].