AngularJS provides animation effects that can be used in conjunction with CSS.

To use animations in AngularJS, you need to include the angular-animate.min.js library.

You also need to use the ngAnimate module in your application:

---

What is Animation?

Animation is the dynamic effect produced by changing HTML elements.

Example

Hide a DIV by checking a checkbox:

Hide DIV:

Try it yourself »

Animations should not be overused in an application, but appropriate use can enrich the page and make it easier for users to understand.

If your application already has an app name set, you can add ngAnimate directly to the module:

Example

Hide DIV:

var app = angular.module('myApp', ['ngAnimate']);

Try it yourself »

---

What Does ngAnimate Do?

The ngAnimate module can add or remove classes.

The ngAnimate module does not make HTML elements animate by itself, but ngAnimate monitors events, like hiding/showing HTML elements. If an event occurs, ngAnimate will use predefined classes to set animations for the HTML element.

AngularJS directives for adding/removing classes:

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

The ng-show and ng-hide directives add or remove the value of the ng-hide class.

Other directives add the ng-enter class when entering the DOM and the ng-leave attribute when leaving the DOM.

When the position of an HTML element changes, the ng-repeat directive can also add the ng-move class.

Additionally, after the animation is complete, the element's class collection is removed. For example, the ng-hide directive adds the following classes:

• ng-animate
• ng-hide-animate
• ng-hide-add (if the element will be hidden)
• ng-hide-remove (if the element will be shown)
• ng-hide-add-active (if the element will be hidden)
• ng-hide-remove-active (if the element will be shown)

---

Using CSS Animations

We can use CSS transitions or CSS animations to make HTML elements animate. You can refer to our CSS Transitions Tutorial and CSS Animations Tutorial for more information.

---

CSS Transitions

CSS transitions allow us to smoothly change one CSS property value to another:

Example

When the .ng-hide class is set on a DIV element, the transition takes 0.5 seconds, and the height changes from 100px to 0:

div { transition: all linear 0.5s; background-color: lightblue; height: 100px; } .ng-hide { height: 0; }

Try it yourself »

---

CSS Animations

CSS animations allow you to smoothly modify CSS property values:

Example

When the .ng-hide class is set on a DIV element, the myChange animation will execute, smoothly changing the height from 100px to 0:

@keyframes myChange { from { height: 100px; } to { height: 0; } } div { height: 100px; background-color: lightblue; } div.ng-hide { animation: 0.5s myChange; }

Try it yourself »