Animations in AngularJS, AngularJS Animations with Example

<!DOCTYPE html>
<html>
	<head>
    	<title>AngularJS 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">
			div{
			  transition: all linear 0.5s;
			  background-color:#0099da;
			  height: 100px;
			  width: 100%;
			  position: relative;
			  top: 0;
			  left: 0;
			}
			 
			.ng-hide {
			  height: 0;
			  width: 0;
			  background-color: transparent;
			  top:-200px;
			  left: 200px;
			}
			.site_name{ 
				padding:30px 0px; 
				text-align:center;
				color:#FFF;
			}
		</style>
    </head>
	
    <body ng-app="myApp">
 
		<h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2>
		 
		<div ng-hide="myCheck">
			<h2 class="site_name">www.freetimelearning.com</h2>
		</div>
		 
		<script type="text/javascript">
			var app = angular.module('myApp', ['ngAnimate']);
		</script>
        
    </body>
</html>

Output :

Topic : AngularJS Animations