A simple Angular Directive to trigger animation from animation.css via various ways based on the attributes given in tag.Very simple to use and easy to implement.All you need is to add ngcssanimator in your app and add the directive in the html elements which you want to animate
For More detatils Please visit http://hrhrprasath.github.io/NgCssAnimate/
Make sure to load AngularJS first, and then NgCssAnimate.min.js.
The module is named ngcssanimate. To enable it, you must simply list it as a dependency in your app. Example:
var app = angular.module('app', ['ngcssanimate', ...]);
Add the following attributes in the required html element you want to animate as per your need
1)ani: to inject the directive into the element
2)ani-class : the animation css class name which will be triggered [onload by default]
3)ani-delay-start : Timeout after which the animation is triggered
4)ani-additional-class : more css class which need to be added with the animation eg:"infinity" mainly useful to modify timings
5)ani-event : Event name on which the animation is to be triggered eg:"click" means trigger animation on click
6)ani-event-once ="true" : means animation will be triggered only once
7)ani-trigger-element-id="btn1" ani-trigger-element-event="click" : attributes which can be used to trigger animation based on other element activation
8)ani-trigger-once="true" : trigger animation based on other element activity only once
9)ani-scope-class-var="animationclass" : name of the scope variable which represents the animation css class.Animation is triggered whenever the value to the scope variable changes if other events or trigger elements are not present
10)ani-on-dom-scroll="true" : trigger's animation on scroll once the element is visible
*If you are not using animate.css just pass your css class name's
Released under MIT licence