7

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

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

在此处输入图像描述

这是我在 OS X 上的 Chrome 中实际看到的内容 在此处输入图像描述

如果您想调整代码，这是一个JSFiddle 。

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

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

如果您在 2021 年阅读此内容，并且 JSFiddle 已被 NSA 机器人霸主取缔，那么这是供后代使用的 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>
4

2 回答 2

4

这有效 - 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。

于 2013-08-30T16:24:23.383 回答
4

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

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

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

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

于 2013-08-31T15:07:32.317 回答