CSS动画不显示[重复]答案

【问题标题】：Display None For CSS Animation [duplicate]CSS动画不显示[重复]
【发布时间】：2017-03-26 20:18:40
【问题描述】：

我正在尝试创建一个可访问性友好的网站，并且在使用 display:none 属性实现动画或过渡方面遇到了困难。我必须使用display:none 才能使其易于访问，但它不会使用display:none 进行动画处理。我记得这适用于关键帧动画，但今天似乎不行。请问有什么解决办法吗？

我必须使用display:none

【问题讨论】：

我的问题没有答案。我必须使用display:none
Animated display none is NOT POSSIBLE 你必须使用 opacity 或从副本中引用的其他内容：“CSS（或 jQuery，就此而言）不能在 display: none; 和 display: block 之间设置动画;. "
@ekaterini9 你不能。 display 属性不可设置动画。
但是用keyframes 一次就不可能了吗？我很确定是的。也许还有另一种方法可以做到这一点。 :(
@ekaterini9 没有。你可以用opacity模拟它，这是一个值的频谱，但是display的值都是互斥的，不相关的值。浏览器不知道如何在display: block 和display: none 之间转换，因为没有中间值。

标签： css animation

【解决方案1】：

尝试使用关键帧自己完成，但收到了意想不到的结果。任何人都可以告诉我为什么即使关键帧中有display: none 属性，div 也会出现在屏幕上？

.x {
  height: 100px;
  width: 100px;
  background-color: black;
  animation: cx 3s forwards;
}
@keyframes cx {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}

<div class='x'>

</div>

【讨论】：

我可以 :) 因为你在keyframes 上设置了它。您还必须为 .x 类设置 display:none
@ekaterini9 那么动画就完全不行了。
没错。那就是问题所在。否则它没用......因为你实际上并没有将display:none 设置为元素。这有什么用？没有。
@ekaterini9 如果关键帧能正确地将display: none 属性应用到元素上就好了。我认为你应该用 JS 或至少 jQuery 来做。如果你愿意，我可以为你做，display: none 属性。
但是 JS 为此使用了 CSS……所以它不起作用。如果您能告诉我如何使用 JS 制作这个，我将非常感谢您