css关键帧动画反转

Question

我正在尝试在页面顶部隐藏一个大屏幕，当用户点击按钮时，它会向下滑动，如果用户再次点击该按钮，它会向上滑动，等等。我不确定为什么这不起作用，任何想法？

＆＃13;

＆＃13;

document.getElementById("button").addEventListener("click", function() {
  var x = document.getElementById("one");
  if (x.style.animation === "shrink .8s") {
    x.style.animation = "shrink .8s";
  } else {
    x.style.animation = "expand .8s";
  }
});

＆＃13;

#one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  animation: shrink .8s;
  animation-fill-mode: forwards;
  
  z-index: -1;
}

@keyframes expand {
  100% {
    top: 0;
  }
}

@keyframes shrink {
  100% {
    top: -100vh
  }
}

＆＃13;

<button id="button">Click</button>

<div id="one"></div>

＆＃13;

＆＃13;

＆＃13;