AngularJS provides animation effects that can be used in conjunction with CSS.\n\nUsing animations in AngularJS requires introducing the angular-animate.min.js library.\n\nYou also need to use the ngAnimate module in the application:\n\n* * *\n\n## What is an Animation?\n\nAn animation is a dynamic change effect produced by changing HTML elements.\n\n### Example\n\nCheck the checkbox to hide the DIV:\n\nHide DIV: \n\n\n\n[Try it Yourself »](#)\n\n|  | Too many animations in an application are not recommended, but appropriate use of animations can enrich the page and make it easier for users to understand. |\n| --- |\n\nIf our application already has a name set, we can add ngAnimate directly to the module:\n\n### Example\n\n

Hide DIV:

\n\n\n\nvar app = angular.module('myApp', ['ngAnimate']);\n\n[Try it Yourself »](#)\n\n* * *\n\n## What does ngAnimate do?\n\nThe ngAnimate module can add or remove classes.\n\nThe ngAnimate module does not animate HTML elements by itself, but ngAnimate monitors events, similar to hiding and showing HTML elements. If an event occurs, ngAnimate will use predefined classes to animate the HTML elements.\n\nAngularJS directives that add/remove classes:\n\n* `ng-show`\n* `ng-hide`\n* `ng-class`\n* `ng-view`\n* `ng-include`\n* `ng-repeat`\n* `ng-if`\n* `ng-switch`\n\nThe `ng-show` and `ng-hide` directives are used to add or remove the value of the `ng-hide` class.\n\nOther directives will add the `ng-enter` class when entering the DOM, and add the `ng-leave` attribute when leaving the DOM.\n\nWhen the position of an HTML element changes, the `ng-repeat` directive can also add the `ng-move` class.\n\nAdditionally, after the animation is complete, the class collection of the HTML element will be removed. For example: the `ng-hide` directive will add the following classes:\n\n* `ng-animate`\n* `ng-hide-animate`\n* `ng-hide-add` (if the element will be hidden)\n* `ng-hide-remove` (if the element will be shown)\n* `ng-hide-add-active` (if the element will be hidden)\n* `ng-hide-remove-active` (if the element will be shown)\n\n* * *\n\n## Using CSS Animations\n\nWe can use CSS transitions or CSS animations to produce animation effects on HTML elements. For this part, you can refer to our (#), (#).\n\n* * *\n\n## CSS Transitions\n\nCSS transitions allow us to smoothly change a CSS property value to another:\n\n### Example\n\nWhen the DIV element has the `.ng-hide` class set, the transition will take 0.5 seconds, and the height will change from 100px to 0:\n\ndiv {\n\n transition: all linear 0.5s;\n\n background-color: lightblue;\n\n height: 100px;\n\n}\n\n.ng-hide {\n\n height: 0;\n\n}\n\n[Try it Yourself »](#)\n\n* * *\n\n## CSS Animations\n\nCSS animations allow you to smoothly change CSS property values:\n\n### Example\n\nWhen the DIV element has the `.ng-hide` class set, the `myChange` animation will execute, which will smoothly change the height from 100px to 0:\n\n@keyframes myChange {\n\n from {\n\n height: 100px;\n\n } to {\n\n height: 0;\n\n }\n\n}\n\ndiv {\n\n height: 100px;\n\n background-color: lightblue;\n\n}\n\n div.ng-hide {\n\n animation: 0.5s myChange;\n\n}\n\n[Try it Yourself »](#)