Question

我正致力于在一个非常动画片段的网站上添加对prefers-reduced-motion的支持。由于该功能现在是选择加入并且不受支持，我需要在媒体查询之外设置我的动画，然后使用其他CSS规则禁用@media screen and (prefers-reduced-motion: reduce) {}内的动画

有两种动画，vertical-animate和horizontal-animate。两者都从0％直线变为100％，不透明度从0变为1，顶部/左边从100px变为0px。

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

@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（尽可能少，请！）禁用动画，以便设计在现有完成的关键帧动画结束时显示？

Answer 1

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

我假设你的动画只运行一次，然后他们使用前进离开了风格

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

animation-delay: -99s;

这会使你的动画开始，好像已经过了99秒，并且会让你获得结果。当然，99秒的值是任意的，你只需要将它设置得比动画的最大长度更高

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

1 个答案: