使用过滤器模糊的 CSS 动画导致 Chrome 上的“文本跳转”

Question

我创建了这个 FadeInLeftBLur 动画，它只会在 Chrome 中导致动画结束时出现“闪烁”。

<div id="text" class="fadeLeftBlurAnimate fadeLeftBlurAnimated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum, lorem in lacinia congue, augue eros ultricies nisl, sit amet ornare felis nunc vel arcu</div>

#text{
  font-size: 30px;
}
.fadeLeftBlurAnimate {
    opacity: 0;
    will-change: filter, transform, opacity;
}
.fadeLeftBlurAnimated {
    opacity: 1;
    animation-name: fadeLeftBlurAnimation;
    animation-duration: 1600ms;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes fadeLeftBlurAnimation {
    0%{
        opacity: 0;
        transform: translateX(-10%);
        filter: blur(16px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

这里有一个例子：https://jsbin.com/jaralid/edit?html,css,output

Answer 1

好像是cubic-bezier 函数。最后一个数字导致了“跳跃”。您可能应该报告一个错误。如果您将最后一个数字设置为小于 0.9，它应该看起来不错。在修复之前，请使用 0.89：

/*                                                         This number*/
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 0.89);