angular-flash-messages auto hide

<!DOCTYPE html>
<html ng:app="example">

  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.js"></script>
    <script data-require="prefixfree@*" data-semver="1.0.7" src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <script src="https://rawgithub.com/gtramontina/angular-flash/master/angular-flash.js"></script>
    <script src="script.js"></script>

    <link data-require="meyer-reset@*" data-semver="0.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="flash-messages.css" />
  </head>

  <body>
    <header>
      <nav>
        <ol>
          <li><a href="#/">Home</a></li>
          <li><a href="#/some">Some</a></li>
          <li><a href="#/other">Other</a></li>
          <li><a href="#/page">Page</a></li>
        </ol>
      </nav>
      <flash:messages class="slide-down" ng:show="messages"></flash:messages>
    </header>
    <main ng:view=""></main>
    <footer><code>bower install angular-flash-messages</code></footer>
  </body>

</html>

angular.module('example', ['ngRoute', 'ngAnimate', 'flash'])

.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
  .when('/',      { templateUrl: 'home.html'  })
  .when('/some',  { templateUrl: 'some.html'  })
  .when('/other', { templateUrl: 'other.html' })
  .when('/page',  { templateUrl: 'page.html'  });
}])

.run(['$rootScope', 'flash', function ($rootScope, flash) {
  $rootScope.$on('$routeChangeSuccess', function (event, to, from) {
    if (!from || !from.$$route.originalPath) return;
    from = from.$$route.originalPath;
    to = to.$$route.originalPath;
    flash('From "' + from + '" to "' + to + '"');
  });
}]);

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: white;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: rgb(100, 100, 100);
}

a { color: rgb(100, 100, 100); }

body > header,
body > footer {
  position: fixed;
  left: 0;
  right: 0;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

body > header { top: 0; }
body > footer { bottom: 0; }

body > header > nav > ol,
body > header > nav > ol > li,
body > header > nav > ol > li a { line-height: 45px; }

body > header > nav > ol > li {
  float: left;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

body > header > nav > ol > li:hover {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
}

body > header > nav > ol > li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  padding: 0 15px;
}

main {
  height: 100%;
  width: 100%;
  padding: 90px 45px;
}

main > h1 {
  font-size: 3em;
  font-weight: 100;
}

body > footer {
  line-height: 45px;
  text-align: right;
  padding: 0 15px;
  font-size: .7em;
}

<h1>Home</h1>

<h1>Some</h1>

<h1>Other</h1>

<h1>Page</h1>

#flash-messages {
  position: fixed;
  background-color: rgba(255, 191, 0, 0.75);
  padding: 5px 15px;
  display: inline-block;
  text-align: center;
  width: 200px;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  border-radius: 5px;
  font-size: .7em;
}

.slide-down { display: none !important; }
.slide-down.ng-hide-remove {
  display: block !important;
  animation:
    slide-down-enter 250ms ease-out,
    slide-down-leave 500ms 3s ease;
}

@keyframes slide-down-enter {
  from { opacity: 0; transform: translateY(-75%); } 
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down-leave {
  from { opacity: 1; transform: translateY(0); } 
  to { opacity: 0; transform: translateY(75%); }
}