The animation is similar to other examples we have seen. In the animation the top position of every frame is changed.
In this demo, we define the @keyframes by JavaScript. This is since we want to make our images responsive. Thus we calculate the image height by using the proper aspect ratio and set the values in the dynamic @keyframes.
We use two different techniques to set the keyframes: one for the images and one for the progress bar. In progress bar, insertRule function is used. For images, a special library is used.