我偶然发现了 Chrome 中可能是也可能不是错误的东西。我有一个关键帧动画，它使元素的 css 模糊从 50px 到 0px。
它在 Safari 中运行良好，但 Chrome 似乎一点也不喜欢它。这是你应该看到的
这是我在 OS X 上的 Chrome 中实际看到的内容
这是一个 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>
最佳答案
这有效 - 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 .
关于html - 为什么 Chrome 不为 CSS 过滤器设置动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18537405/