How to make a dynamically changing blur effect with good performance?

Question

css

I'm making an image slider like RoundAbout
jsfiddle.net/MaxKondratenko/4anxt8gL/1
and stumbled upon a problem... I need to blur the image, in theory it would be nice to make it dynamically changeable... but for example, as done now by adding a class, everything works but not dynamically + to everything if you move already blurry images, the performance drops at times ...
Can you advise some solutions? in which direction to dig at all. I was thinking about HTML5 Canvas, but won't I run into the same performance issue there?

Answer 1

The most productive way is to make two layers one on top of the other, insert a clear image on one, put a copy of the image with blur under it (that is, already blurred in the jpeg editor), and then add a class like this to the top layer: transition: opacity 2s; opacity: 0
The blur filter eats up a huge amount of resources due to the amount of calculations and you can’t optimize it in any way.