css - 为什么我的 css 闪烁动画不起作用？

Question

body {
  min-height:100vh;
  background:teal;
  display:grid;
  place-items:center;
  font-family:monospace;
}

.box {
  height:10rem;
  width:10rem;
  background:black;
  animation:blink 2s steps(2) infinite;
}

@keyframes blink {
  to {
    opacity:0;
  }
}

<div class="box">
  
</div>

我希望我的盒子在不透明度 1 和 0 之间切换而没有过渡（因此我使用步进功能），但盒子只能在半透明和完全可见之间切换。这是为什么？

标签： css