Is there any way to fix the rendering speed of the image?

Question

css

There is an animation (something like a slider) in which the images change each other sharply flying in from the side. That is, ideally, when changing the image, a new one should appear and be rendered in the first frame of the animation, and in the next frames it should quickly fly towards the target. But in fact, the image appears on the 4th-5th frame, that is, already halfway to the goal. It doesn't look like much, you know. It doesn't always work. Most of the time everything is fine. Images size 200x460px. There are quite a few different images. The order is arbitrary, that is, it is impossible to say exactly which image will be next and place it in the DOM in advance. Putting all the images at once in the DOM will undesirably affect the performance of the entire page. Is there anything that can be done about it?
Separately, I would like to note that this is not about loading images, since I preload all the images and at the time of the animation they are all already loaded.

Answer 1

Arbitrarily put an image in the DOM in advance, and then take not an arbitrary image, but the last one put in the DOM.