CSS动画无法从页面加载开始

Question

我的动画已经褪色，我想立即发生这种情况，但是由于某种原因，页面在播放动画之前会在一秒钟内正常显示。有时动画甚至无法播放。当页面首次加载时，它应该是全黑屏幕，然后我所拥有的中心div应该从顶部滑入，然后所有内容都会淡入视图。

动画：

@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slidedown {
  0% {
    transform: translateY(-200%);
  }
  80% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

样式：

  animation:slidedown 0.5s ease-out 0.2s normal 1;

codesandbox-您必须在主菜单上单击“ 90球”下方的“打印卡”才能进入我正在谈论的页面。

以下是heroku上页面的链接：https://bingo-caller.herokuapp.com/cards90