Question

我偶然发现了Chrome中可能存在或不存在的错误。我有一个关键帧动画，可以将元素的css模糊从50px动画到0px。

它在Safari中运行良好，但Chrome似乎根本不喜欢它。这是你应该看到的

enter image description here

这就是我在OS X上的Chrome中实际看到的内容 enter image description here

如果您想要调整代码，请注意JSFiddle。

你需要在Chrome中查看它，如果你在Safari中查看它，你会看到我预期会发生什么。

我已经尝试定义背面可见性触发硬件加速，但这些都没有效果。

如果您在2021年阅读此内容并且JSFiddle已被NSA Robot Overlords取消，那么这是后代的HTML。

    <!DOCTYPE html>
<html>
    <head>
        <style>

            @-webkit-keyframes TRANSITION-IN {
                0% {
                    -webkit-transform: scale(0.5);
                    opacity: 0;
                    -webkit-filter: blur(50px);
                }
                100% {
                    -webkit-transform: scale(1);
                    -webkit-filter: blur(0px) !important;
                }   
            }

            h1 {
                width: 500px;
                height: 500px;
                line-height: 500px;
                background: #000;
                color: #fff;
                margin: 40% auto;
                text-align: center;

                -webkit-animation-name: TRANSITION-IN;
                -webkit-animation-duration: 0.25s;
                -webkit-animation-timing-function: ease-out;
                /* -webkit-animation-fill-mode: forwards; */
            }

        </style>
    </head>
    <body>

        <h1>BOO!</h1>

    </body>
</html>

Answer 1

这有效 - jsfiddle

@-webkit-keyframes TRANSITION-IN {
    0% {
        -webkit-transform: scale(0.5);
        opacity: 0;
        -webkit-filter: blur(50px);
    }
    100% {
        -webkit-transform: scale(1);
        -webkit-filter: blur(0px) !important;
    }   
}

h1 {
    width: 500px;
    height: 500px;
    line-height: 500px;
    background: #000;
    color: #fff;
    margin: 40% auto;
    text-align: center;

    -webkit-animation-name: TRANSITION-IN;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    /*-webkit-animation-fill-mode: forwards;*/
}

您只需删除animation-fill-mode属性，因为它的目的与您（或可能）期望的目的不同 - animation-fill-mode-not-working。

Answer 2

我在这个问题中找到了答案：Chrome cannot apply filter:hue-rotate() and transform...。

解决方案是应用两个关键帧动画，一个用于缩放和不透明度，另一个用于模糊。这是一个fiddle。

   @-webkit-keyframes TRANSITION-IN {
        0% {
            -webkit-transform: scale(0.5);
            opacity: 0;
        }
        100% {
            -webkit-transform: scale(1);
            margin-top: 0;
        }   
    }

    @-webkit-keyframes BLUR-IN {
        0% {
            -webkit-filter: blur(50px);
        }
        100% {
            -webkit-filter: blur(0px);
        }   
    }

这是应用的......

-webkit-animation-name: TRANSITION-IN, BLUR-IN;

我仍然认为这是一个错误，但至少有一个解决方法。

为什么Chrome不会动画CSS过滤器？

2 个答案: