When you hover the cursor over the image, it is added using the JS class .active

The active style indicates that the image should be blur(10px) and transform: translateY(20px);

The active animation is fine, but if we want to remove the active to return to its normal state, the picture flashes before the end of the animation ...

How can I fix it?

  • 3
    Please add code to your question - Arthur
  • @Denver Welcome to stackoverflow! If the answer was useful to you, check it with a tick (near the number) and / or a plus. Otherwise, do not be silent, if something is not satisfied or incomprehensible in the answer, then write in the comment. - Alexandr_TT

1 answer 1

Snippet to reproduce the problem:

 for (let img of document.querySelectorAll('.test')) { img.addEventListener('mouseenter', function () { this.classList.add('active'); }); img.addEventListener('mouseleave', function () { this.classList.remove('active'); }); } 
 .test { transition: all 0.3s ease-out; } .active { filter: blur(10px); transform: translateY(20px); } 
 <img class="test" src="https://picsum.photos/200/150/?image=11"> <img class="test" src="https://picsum.photos/200/150/?image=15"> <img class="test" src="https://picsum.photos/200/150/?image=16">

The reason is resource intensity blur.
Accordingly, it is impossible to solve the problem 100% . But, can apply CSS voodoo some optimizations that will help in most cases.
upd .: After reading the comments and checking in Firefox (Win, Andr) and Opera (Win), I conclude that I was wrong about the reasons. Apparently, they are still in Chrome under Windows and android.

Solution option:

 for (let img of document.querySelectorAll('.test')) { img.addEventListener('mouseenter', function () { this.classList.add('active'); }); img.addEventListener('mouseleave', function () { this.classList.remove('active'); }); } 
 .test { transition: filter 0.3s steps(18), transform 0.3s ease-out; backface-visibility: hidden !important; transform: translate3d(0, 0, 0) scale(1, 1); } .active { filter: blur(10px); transform: translate3d(0, 20px, 0) scale(1, 1); } 
 <img class="test" src="https://picsum.photos/200/150/?image=11"> <img class="test" src="https://picsum.photos/200/150/?image=15"> <img class="test" src="https://picsum.photos/200/150/?image=16">

This solution includes (in order of importance):

  • limiting the number of transition frames, steps(18)
    60 frames / s (browser limit) * 0.3s = 18
    It also makes the time transition function linear, which greatly accelerates the calculations (but this is not just an analog of linear , but better).

  • disabling rendering of the back side of an element through backface-visibility: hidden
    The meaning is obvious: the flip is not executed => there is no point in rendering a revolve.

  • exclusion from recalculation of transform transformations on X and Z, as well as scaling
    Plus, translate3d creates a new layer when rendering the element - which, in turn, should force the browser to use the GPU not only when blurring.

  • TS, to apply the minimum reproducible example is your task, but not the responding ones. - yar85
  • one
    very high quality answer. It is not clear why they have not yet appreciated. (: +) Maybe Sunday is to blame - Alexandr_TT
  • @Alexandr_TT, thanks! Estimates are okay, but if the author of the question does not mark the answer (which makes it impossible to link this question to the duplicates), it will be a shame, considering how easy it is to face the problem of animations and transitions flashing ... this is the webcam’s “feature” :) yar85
  • Feel free to remind beginners about the opportunity to thank the author of the answer. There are cases with newbies that they seriously did not know about this possibility. - Alexandr_TT
  • I do not blink anything in any of the browsers, so I did not understand what the problem is) slows down in chrome - yes, but it does not blink (and in Firefox everything is smooth) - andreymal