CSS动画填充模式不适用于显示：无答案

【问题标题】：CSS animation-fill-mode not working for display:noneCSS动画填充模式不适用于显示：无
【发布时间】：2017-10-05 06:53:12
【问题描述】：

我有以下代码来显示/隐藏基于 css 类的轮播上的按钮。一切都按预期工作，除了 hideButton，动画完成后显示未设置为“无”。

效果是虽然按钮消失了，但它仍然位于底层项目之上并阻止点击点击它们。

.pills-tab-carousel__button {
  position: absolute;
  top: 0;
  height: 100%;
  line-height: 100%;
  width: 64px;
  animation: showButton .5s forwards;
}

.pills-tab-carousel__button--hidden {
  animation: hideButton .5s forwards;
}

@keyframes hideButton {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes showButton {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    opacity: 0.01;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

【问题讨论】：

标签： css css-animations

【解决方案1】：

为什么不使用visibility: hidden;，因为你的元素已经是绝对位置，所以你不需要担心布局。

查看我刚刚创建的小提琴：

https://jsfiddle.net/uvxeqaLn/

【讨论】：

我没有意识到visibility: hidden 允许点击元素！我认为它占用了空间并且还捕获了指针事件。谢谢！
很多原因，也许你不希望它占用空间、被屏幕阅读器红掉、获得键盘焦点等等。

【解决方案2】：

您不能为display 属性设置动画。

您也可以设置属性pointer-events: none;，这将允许点击通过隐藏元素。

请注意，IE11 之前的任何 IE 版本都不支持此功能。

【讨论】：