notifier.css

/* ----------------------------------
 * Status
 * ---------------------------------- */
section[role="status"] {
  background: rgba(64,64,64,1) url(../img/status/pattern.png) repeat left top;
  overflow: hidden;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: left;
}

section[role="status"] p {
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 2.2rem;
  margin: 1rem 3rem;
  padding: 0;
  text-align: left;
}

section[role="status"] p strong {
  font-weight: 500;
}


section[role="status"].hidden {
  display: none;
}

/*
 * Right to Left View
 */

html[dir="rtl"] section[role="status"],
html[dir="rtl"] section[role="status"] p {
  text-align: right;
}


@keyframes hide {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@-webkit-keyframes hide {
  0%   { -webkit-transform: translateY(0); }
  100% { -webkit-transform: translateY(100%); }
}

/* Building Blocks */
/* Status */
section[role="status"] {
  animation: hide .3s forwards;
  -webkit-animation: hide .3s forwards;
}

section[role="status"].onviewport {
  animation: show .3s forwards;
  -webkit-animation: show .3s forwards;
}