Цикл слайдера анимированного изображения не начинается с конечной точки ⇐ Javascript

[Гость]

У меня есть очень простой слайдер с анимированными изображениями. Я хочу, чтобы он бесконечно перемещался справа налево. Содержит 10 изображений. В конце 10-го изображения мне нужно изображение №. 1, чтобы снова появиться, затем 2 и так далее.

Но проблема в том, что после окончания 10-го изображения первое изображение появляется снова с исходной позиции, чего я не хочу. Я хочу, чтобы оно снова появлялось плавно после 10-го изображения, затем 2-го изображения, затем 3-го и т. д.

Как мне этого добиться? Есть предложения?

Я пробовал много вещей, например, вместо применения анимации к ul я применял ее к отдельным li, а также пробовал использовать разные значения ключевых кадров (которые Я закомментировал). Но у меня недостаточно знаний CSS-анимации, поэтому это всего лишь предположения без надлежащих расчетов и понимания.

Даже если вы предоставите мне ресурс, на котором я смогу учиться и затем достичь этого, я буду признателен.

Код

Мои коды:

:root{ --т: 10 с; } ул { анимация: перемещение var(--t) линейное бесконечное; дисплей: гибкий; } ул: наведите { состояние анимации-воспроизведения: приостановлено; } @keyframes переместить { /* 0% { Transform: Translate(-250%);} */ 100% {transform: Translate(-150%)}; /* 100% {transform: Translate(-250%)}; 100% {transform: Translate(-500%)}; */

• 1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  8
  
  9
  
  10