#note {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  right: 0;
  background: #fde073;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  animation: slideDown;
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black;
}

@keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px);
  }
  10%,
  90% {
    -webkit-transform: translateY(0px);
  }
}

@-webkit-keyframes slideDown {
  0%,
  100% {
    -webkit-transform: translateY(-50px);
  }
  10%,
  90% {
    -webkit-transform: translateY(0px);
  }
}
@-moz-keyframes slideDown {
  0%,
  100% {
    -moz-transform: translateY(-50px);
  }
  10%,
  90% {
    -moz-transform: translateY(0px);
  }
}

.cssanimations.csstransforms #note {
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  animation: slideDown 4s ease-in-out;
  -webkit-animation: slideDown 4s ease-in-out;
  -moz-transform: translateY(-50px);
  -moz-animation: slideDown 4s ease-in-out;
}