Angularjs: CSS-based animations

var app = angular.module('animations', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
  $scope.songs=['Sgt. Peppers Lonely Hearts Club Band','With a Little Help from My Friends','Lucy in the Sky with Diamonds','Getting Better' ,'Fixing a Hole','Shes Leaving Home','Being for the Benefit of Mr. Kite!' ,'Within You Without You','When Im Sixty-Four','Lovely Rita','Good Morning Good Morning','Sgt. Peppers Lonely Hearts Club Band (Reprise)','A Day in the Life'];
});

<!DOCTYPE html>
<html ng-app="animations">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script data-require="angular-animate@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>ng-show</h1>
    <div ng-init="checked=true">
      <label>
        <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
      </label>
      <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
        Visible...
      </div>
    </div>
    
    <h1>ng-if</h1>
    <div ng-if="bool" class="fade">
       Fade me in out
    </div>
    <button ng-click="bool=true">Fade In!</button>
    <button ng-click="bool=false">Fade Out!</button>
    
    <h1>ng-class</h1>
    <p>
      <input type="button" value="set" ng-click="myCssVar='css-class'">
      <input type="button" value="clear" ng-click="myCssVar=''">
      <br>
      <span ng-class="myCssVar">CSS-Animated Text</span>
    </p>
    
    <h1>ng-animate</h1>
    <div class="animate-list">
      <input type="text" ng-model="search">
      <button type="submit">Filter</button>
      <ul>
        <li ng-animate="'animate'" ng-repeat="song in songs | filter:search">
          {{song}}
        </li> 
      </ul>
    </div>
  </body>

</html>

/* Put your css in here */

/* ng-show */

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.sample-show-hide.ng-hide {
  opacity:0;
}


/* ng-if */

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

/* now the element will fade out before it is removed from the DOM */
.fade.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.fade.ng-leave.ng-leave-active {
  opacity:0;
}


/* ng-class */
.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}


/* ng-animate */
li{list-style: none; }
.animate-list { color: #666; overflow: hidden;}
.animate-list .ng-animate {
  transition: 500ms ease-in all;
}
.ng-enter, .ng-leave {
  position: relative;
  display: block;
} 
.ng-enter.ng-enter-active, .ng-leave {
  left: 0;
}
.ng-leave.ng-leave-active, .ng-enter {
  left: 500px;
}