AngularJS fade out animation using CSS keyframes

<!DOCTYPE html>
<html>

  <head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.18/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>AngularJS Animations - Fade Out - CSS Keyframe Example</h1>
    <div ng-app="exampleApp" ng-init="fadeOut=false">
      <button ng-click="fadeOut=!fadeOut">{{fadeOut ? "Reset" : "Fade Out"}}</button>
      <div class="animate-me" ng-hide="fadeOut">
         <i class="fa fa-spinner fa-spin fa-lg"></i>
         <span class="loading-text">Loading</span>
      </div>
    </div>
  </body>
</html>

var exampleApp = angular.module("exampleApp", ["ngAnimate"]);

.animate-me {
  border: 1px solid;
  border-radius:5px;
  width: 80px;
  padding: 4px;
  background-color: gray;
  box-shadow: 8px 8px 5px #888888;
}

.animate-me.ng-hide-add {
  -webkit-animation:3s fadeout;
  animation:3s fadeout;
}

@keyframes fadeout {
  from { 
    opacity: 1.0;
    display: block !important;
  }
  to { opacity: 0; }
}

@-webkit-keyframes fadeout {
  from { 
    opacity: 1.0;
    display: block !important;
  }
  to { opacity: 0; }
}

.loading-text {
  padding: 2px;
  color: white;
}

.fa-spinner {
  color: white;
}

button {
  margin-bottom: 10px;
}