Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
CSS animation definitions
AniJS allows you to handle CSS3 animations easily, you just need to include the animation styles definition, and after that you can play with data-anijs tag.
<head> <!-- Include the styles definition --> <link rel="stylesheet" href="assets/styles/custom-animations.css"> </head>
<button data-anijs="if:click, on: span, do: pulseAnimation, to: .navbar"></button>
We strongly recomend you to use AniCollection.css library as starting point, this library provides beautiful animations.
##Using AniCollection.css library
<head> <!-- AniCollection.css library --> <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css"> </head>
<button data-anijs="if:click, on: span, do: bounce animated, to: .navbar"></button>
Note: Remember to add the animated css class when you are using the AniCollection.css library.
##Tips an Tricks
If you want to run the animation only once just add $fireOnce to the after definition.
<button data-anijs="if:click, on: span, do: pulse animated, to: .navbar, after: $fireOnce"></button>