为什么Chrome不会动画CSS过滤器？
gar*_*uan 7 html css google-chrome css3
我偶然发现了Chrome中可能存在或不存在的错误.我有一个关键帧动画,可以将元素的css模糊设置为50px到0px.
它在Safari中运行良好,但Chrome似乎根本不喜欢它.这是你应该看到的
这就是我在OS X上的Chrome中实际看到的内容
如果你想调整代码,那么继续使用JSFiddle.
你需要在Chrome中查看它,如果你在Safari中查看它,你会看到我预期会发生什么.
我已经尝试定义背面可见性触发硬件加速,但这些都没有效果.
这是后代的HTML,如果您在2021年阅读此内容并且JSFiddle已被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>
我在这个问题中找到了答案：Chrome无法应用filter：hue-rotate（）和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;
我仍然认为这是一个错误，但至少有一个解决方法。