Skip to content

CSS animation definitions

Jump to bottom Edit New page
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>

Nicolas

Home page

Basic Topics

Advanced AniJS

Changelog

Clone this wiki locally