CSS 使用滤镜模糊的动画在 Chrome 上造成 "text jump"

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);

CSS 使用滤镜模糊的动画在 Chrome 上造成 "text jump"

CSS animation using filter blur causing "text jump" on Chrome

css

google-chrome

css-animations