使用其他CSS规则禁用现有CSS关键帧动画

我正在一个非常动画化的网站上添加对的支持。由于该功能是opt-in，目前还不受很好的支持，因此我需要在媒体查询之外设置动画，然后使用附加的CSS规则来禁用

@媒体屏幕内的动画和（首选简化运动：reduce）{}

有两种动画，

垂直动画

和

水平动画

。两者都从0%直线变为100%，不透明度从0变为1，顶部/左侧从100px变为0px

现在，我尝试重置keyframes和animation属性时使用了以下方法：

@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;
    }

}

这成功地阻止了动画，但也使动画元素不可见！使用dev工具，我可以看到它们基本上停留在

不透明度：0

和

[上/左]：100px

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

---

我怎样才能编写额外的CSS（请尽量少！）来禁用动画，使设计像在现有已完成的关键帧动画末尾一样出现？

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

我假设您的动画只运行一次，然后使用“前进”保留样式

所以，我相信在你的媒体查询风格设置

animation-delay: -99s;

---

这将使您的动画开始，就好像99秒已经过去，并将得到您的expexted结果。当然，99秒的值是任意的，您只需将其设置为高于动画的最大长度即可

谢谢您的回答，@vals。在尝试重新充实代码时（这是在一堆混音中传播的），我意识到

.vertical animate

类本身在默认情况下是隐藏的。感谢您的回答，为我指明了正确的方向。我将在几天后删除此问题，但感谢您的帮助。