<!DOCTYPE html> <html> <head> <title>AngularJS CSS Animations</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script> <style type="text/css"> @keyframes myChange { from { height: 100px; } to { height: 0px; } } div { height: 100px; background-color:#0099da; } div.ng-hide { animation: 0.5s myChange; } .site_name{ padding:30px 0px; text-align:center; color:#FFF; } </style> </head> <body ng-app="ngAnimate"> <h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2> <div ng-hide="myCheck"> <h2 class="site_name">www.freetimelearning.com</h2> </div> </body> </html>
Output :
Topic :
AngularJS CSS Animations
