CSS animation definitions

Dariel Noel Vila Plagado edited this page Mar 26, 2015 · 1 revision

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>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.