CODEWITHSUNDEEP
htmlcssgoogle-chrome
gargantuan
gargantuan

Reputation: 8944

Why wont Chrome animate a CSS filter?

I've stumbled across what may or may not be a bug in Chrome. I have a keyframe animation that animates the css blur of an element from 50px to 0px.

It works fine in Safari, but Chrome doesn't seem to like it at all. Here's what you should see

enter image description here

And here's what I actually see in Chrome on OS X enter image description here

Heres a JSFiddle should you want to tweak the code.

You'll need to look at it in Chrome, and if you view it in Safari you'll see what I expected to happen.

I've tried defining backface-visibility triggering hardware acceleration, but neither of those have an effect.

Here's the HTML for posterity in case you're reading this in 2021 and JSFiddle has been taken down by the NSA Robot Overlords.

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

Upvotes: 7

Views: 6935

Answers (2)

gargantuan
gargantuan

Reputation: 8944

I found the answer in this question: Chrome cannot apply filter:hue-rotate() and transform....

The solution is to apply two keyframe animations, one for the scale and opacity, and another for the blur. Here's a 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);
        }   
    }

Which is applied like this...

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

I still think this is a bug, but at least there's a workaround.

Upvotes: 4

Patt Mehta
Patt Mehta

Reputation: 4194

This works - 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;*/
}

You just have to remove the animation-fill-mode attribute because it serves a different purpose than what you are (or might be) expecting - animation-fill-mode-not-working.

Upvotes: 4

Related Questions