显示无CSS动画

Question

我正在努力建立一个易于访问的网站，并且很难实现动画或使用display:none属性进行转换。我必须使用display:none才能使其成为可访问的，但它不会使用display:none制作动画。我记得这适用于关键帧动画，但似乎今天没有。有什么解决方案吗？

我必须使用display:none

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<div class='x'>

</div>

＆＃13;

＆＃13;

＆＃13;