<!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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic : AngularJS CSS Animations