CODEWITHSUNDEEP
cssgoogle-chromecss-animations
Neto Braghetto
Neto Braghetto

Reputation: 1381

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

I've created this FadeInLeftBLur animation which is causing a "flickering" at the end of the animation only in 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);
    }
}

and here an example: https://jsbin.com/jaralid/edit?html,css,output

Upvotes: 0

Views: 396

Answers (1)

Rojo
Rojo

Reputation: 2869

It seems to be the cubic-bezier function. The last number is causing that "jump." You should probably report a bug. If you set that last number to something less than 0.9, it should look fine. Until it's fixed, use 0.89:

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

Upvotes: 1

Related Questions