Почему не работает css анимация?

Question

[LoonTiG]

Пытался сделать карусель с плавным переходом кадров
Изначально писал на Js, но результата это не дало, в итоге посоветовали написать на css
Вот код

@-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;
}

Однако результат остался тот же, переключение слайдов работает, но резко и мгновенно
Подскажите, что не так?

Answer 1

[gleendo]

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

Comments

[LoonTiG]

https://jsfiddle.net/mt8Lecp8/

[trushka]

LoonTiG, что-то там вообще непонятно.. Мжете саму карусель выложить? Ато, тут даже если она есть, то не работает))

Answer 2

[trushka]

Да, всё зависит от того, какая у вас именно логика, так сказать, смены кадров. Вообще, тут, мне кажется, только transition нужен.. И лучше не left/top анимировать, а transform - будет плавнее и менее ресурсоёмко, без перерисовок экрана. Только надо will-change: transform задать

Comments

[LoonTiG]

Дело в том, что если я прописываю просто transition, вот так:
next-slide {
left: 287px;
transition: 3s;
}
То ничего не меняется, он просто перескакивает