Pure CSS GMail notifications

HTML

<div class="notifications">
  <input type="checkbox" id="notif-1" />
  <div class="notif" for="notif-1">
    <span class="message">5 messages archived</span>
    <label for="notif-1">✕</label>
    <a href="#">Undo</a>
  </div>
</div>

CSS

.notifications input[type="checkbox"] {
  display: none;
}

.notifications .notif {
  animation: slideDown 5s 0s ease forwards;
  background-color: #333;
  border-radius: 0.25rem;
  bottom: 1rem;
  color: white;
  font-family: sans-serif;
  left: 1rem;
  padding: 1rem;
  position: fixed;
  transform: translateY(5rem);
  width: 20rem;
}

.notifications .notif a {
  color: white;
  float: right;
}

.notifications .notif label {
  color: white;
  cursor: pointer;
  float: right;
  margin-left: 1rem;
}

.notifications input[type="checkbox"]:checked+.notif {
  display: none;
}

@keyframes slideDown {
  0%,
  100% {
    transform: translateY(5rem);
  }
  5%,
  95% {
    transform: translateY(0);
  }
}

@keyframes hide {
  0%,
  100% {
    display: none !important;
  }
}