Why is css animation not working?

Question

css

I tried to make a carousel with a smooth transition of frames
Initially I wrote in Js, but it didn’t work, in the end I was advised to write in css
Here is the code

@-webkit-keyframes next-slide {
from {left: 0px}
50% {left: 144px;}
to {left: 287px;}
}
@keyframes next-slide {
from {left: 0px}
50% {left: 144px;}
to {left: 287px;}
}

.next-slide {
  animation: next-slide 5s 1 ease-in-out;
  -webkit-animation: next-slide 5s 1 ease-in-out;
  transition: 3s;
}

However, the result remains the same, switching slides works, but abruptly and instantly
Tell me what's wrong?

Answer 1

Рабочий прототип скиньте, в codepen например или jsfiddle
В отрыве от контекста, сложно определить в чем может быть проблема.

Answer 2

.next-slide {
  animation: 5s  ease-in-out;
  -webkit-animation:5s  ease-in-out;
 -moz-animation:5s  ease-in-out;
}

Answer 3

Yes, it all depends on what kind of logic you have, so to speak, of changing frames. In general, here, it seems to me, only transition is needed .. And it’s better not to animate left / top, but transform - it will be smoother and less resource-intensive, without screen redrawing. Just need to set will-change: transform