CSS 动画不适用于某些属性

如何解决CSS 动画不适用于某些属性

这可能是一个非常愚蠢的问题，但我是自学的，我有很多问题。

我正在玩 css 动画，我想要一个闪烁的效果，所以我写道： HTML：

<span class="blink">Blink</span>

CSS：

.Box{
  height: 500px;
  width: 500px;
  background: red;
  animation: blink 1s linear 0s infinite;

}
@keyframes blink {
  50%{
    display: none;
  }
}

但它不起作用，所以我尝试使用 opacity: 0; 并且它起作用了，我只是想知道为什么？有什么区别？

谢谢。

解决方法

并非所有的 CSS 属性都是可动画的，也不是所有的 CSS 属性都是可转换的。查看 MDN 页面，了解有关单个属性动画能力的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/display

在您的情况下，display 会使闪烁效果不佳，因为它会从布局中移除并导致所有内容发生变化； visibility 会是更好的选择。

这是一个工作示例：

.blink {
  animation: blink-animation 1s steps(5,start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Here is a <span class="blink">blinking</span> text.