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 an Animation?
An animation is a dynamic effect produced by changing an HTML element.
### Example
Hide a DIV by checking a checkbox:
Hide DIV:
[Try it »](#)
|  | 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 »](#)
* * *
## 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, such as hiding and showing HTML elements. If an event occurs, ngAnimate will use predefined classes to set the animation 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 are used to add or remove the `ng-hide` class value.
Other directives will 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.
Furthermore, after the animation is complete, the class collection on the HTML element will be removed. For example, the `ng-hide` directive will add the following classes:
* `ng-animate`
* `ng-hide-animate`
* `ng-hide-add` (if the element is to be hidden)
* `ng-hide-remove` (if the element is to be shown)
* `ng-hide-add-active` (if the element is to be hidden)
* `ng-hide-remove-active` (if the element is to be shown)
* * *
## Using CSS Animations
We can use CSS transitions or CSS animations to make HTML elements animate. You can refer to our (#) and (#) for this part.
* * *
## 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 »](#)
* * *
## 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 »](#)
YouTip