I'm using Slick for my carousel and I want to have the images automatically zoom in and zoom out. Here's a demo of my code. This code is adapted from this CodePen.
As you can see, when the first and third images finish their zoom in animation they revert to their initial state, even though I'm using forwards in the animation property. The second image, with the zoom out animation, jumps abruptly to being fully zoomed out for some reason.
One major difference between my code and the initial CodePen is that the latter has this selector:
.myKenburns .slick-slide[aria-hidden="true"] img {
visibility: hidden; }
But this messes with the fade transition so that you no longer get a cross-fade. It just fades out and fades in, which I don't want. That's why I have it commented out.
Any ideas? Thanks so much in advance.