section[role="status"] {
  animation-name: hide;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

section[role="status"].onviewport {
  animation-name: show;
}

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

@keyframes show {
  from {
    transform: translateY(100%)
  }
  to {
    transform: translateY(0)
  }
}

@keyframes hide {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(100%)
  }
}