Animations

Add motion to elements as AngularTS inserts, removes, moves, shows, or hides them.

Start with the animation overview. Use CSS animations for ordinary transitions and JavaScript animations only when the browser animation lifecycle must be controlled directly.


CSS-based animations with the AngularTS CSS driver

Write CSS transitions and keyframe animations for AngularTS structural directives using ng-enter, ng-leave, ng-move, and stagger classes.

JavaScript-based animations with the AngularTS JS driver

Register JavaScript animation handlers with module.animation(), implement enter/leave/move hooks with done callbacks, and use the Web Animations API.

AngularTS animations: CSS and JavaScript drivers overview

Overview of the AngularTS animation system — the $animate service, CSS and JS drivers, structural directive hooks, and class-based transitions.