Menu
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
And here's what I actually see in Chrome on OS X
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>
482
CSS animations work on most modern mobile and desktop browsers. However, your animations may not work if you're using an older browser or a version of your browser that hasn't been updated in several years, simply due to lack of browser support.
Note: All browsers support the animation property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers supports the -webkit-animation media feature.
CSS animations enable web elements to transition from one CSS style configuration to another. The browser can start defined animations on load, but event triggered CSS animations rely on adding and removing classes. AMP supports both animation types.
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
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.
178
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With