CSS 动画不适用于某些属性

Question

这可能完全是一个非常愚蠢的问题，但我是自学成才的，而且我有很多问题。

我正在玩 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; 并且它起作用了，我只是想知道为什么？有什么区别？

谢谢。

Answer 1

并非所有 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.

CSS 动画不适用于某些属性

CSS animations not working with certain properties

css

css-animations