7

Chrome のバグかもしれないし、そうでないかもしれないものに出くわしました。要素の css ブラーを 50px から 0px にアニメーション化するキーフレーム アニメーションがあります。

Safari では問題なく動作しますが、Chrome ではまったく気に入らないようです。ここにあなたが見るべきものがあります

ここに画像の説明を入力

そして、これが私がOS XのChromeで実際に見ているものです ここに画像の説明を入力

コードを微調整する必要がある場合は、JSFiddleを次に示します。

Chrome で表示する必要があります。Safari で表示すると、私が期待していたことがわかります。

ハードウェアアクセラレーションをトリガーする backface-visibility を定義しようとしましたが、どちらも効果がありません。

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>
4

2 に答える 2

4

この質問で答えを見つけました: Chrome cannot apply filter:hue-rotate() and transform... .

解決策は、2 つのキーフレーム アニメーションを適用することです。1 つはスケールと不透明度用、もう 1 つはぼかし用です。ここにフィドルがあります。

   @-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 に答える
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-not-workinganimation-fill-modeとは異なる目的を果たすため、属性を削除する必要があります。

于 2013-08-30T16:24:23.383 に答える