How to animate opacity change on slick slider side elements?

Question

css

I'm trying to make a slider of three images, and the two outer ones should be more transparent than the central slide.
Everything worked out, however, with every third scrolling (with three images in the slider), the animation does not play. Apparently, due to the fact that a new circle begins.
Is there a way to correct this misunderstanding?

Answer 1

Instead .slick-currentof styling .slick-center.
https://jsfiddle.net/g2z7931f/

Answer 2

I think that at first the transition is hung on the parent from the slider, and only then yours works, that's all the trouble.