使用额外的 CSS 规则禁用现有的 CSS 关键帧动画答案

【问题标题】：Disable existing CSS keyframe animation with additional CSS rules使用额外的 CSS 规则禁用现有的 CSS 关键帧动画
【发布时间】：2018-07-04 04:33:07
【问题描述】：

我正在努力在一个非常注重动画的网站上添加对prefers-reduced-motion 的支持。由于该功能是可选的并且目前没有得到很好的支持，我需要将我的动画放在媒体查询之外，然后使用额外的 CSS 规则来禁用 @media screen and (prefers-reduced-motion: reduce) {}

内的动画

有两个动画，vertical-animate 和 horizontal-animate。两者都从 0% 直接变为 100%，不透明度从 0 变为 1，顶部/左侧从 100 像素变为 0 像素。

现在，我有以下尝试重置关键帧和动画属性：

@media screen and (prefers-reduced-motion: reduce) {

    @-webkit-keyframes vertical-animate {}
    @keyframes vertical-animate {}
    @-webkit-keyframes horizontal-animate {}
    @keyframes horizontal-animate {}

    * {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation:  none !important;
        animation: none !important;
    }

}

这成功地阻止了动画，但它也使动画元素不可见！使用开发工具，我可以看到它们基本上被困在opacity: 0 和[top/left]: 100px。

（FWIW，我正在测试没有媒体查询以查看结果。）

如何编写额外的 CSS（请尽可能少！）来禁用动画，以使设计在现有已完成关键帧动画的末尾出现？

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

由于您没有发布完整的代码，我不得不猜测您的代码是什么。

我假设您的动画只运行一次，然后使用 forwards

离开样式

所以，我相信在您的媒体查询样式中设置

animation-delay: -99s;

这将使您的动画开始时仿佛已经过了 99 秒，并会得到您的 expexted 结果。当然，99 秒的值是任意的，你只需要把它设置得比你的动画的最大长度高一点就行了

【讨论】：

感谢您的回答，@vals。在尝试重新充实代码时（它分布在一堆混合中，我意识到 .vertical-animate 类本身默认是隐藏的。感谢您的回答让我朝着正确的方向前进。我将删除几天后提出问题，但感谢您的帮助。