css - 有没有办法使用 CSS 过渡将元素移动到正确的位置，使动画看起来不错？

Question

我正在尝试使用' transition-duration '制作一个轮播，用于幻灯片更改效果，其中包含一堆幻灯片，例如：

|  slide 1 |  slide 2 |  slide 3 |  slide 4  |  slide 5  |

                 <----           ---->      ( <-- left and right arrow buttons )

按向左箭头将幻灯片 1“围绕”移动到末尾，因此它看起来像这样：

|  slide 2 |  slide 3 |  slide 4 |  slide 5  |  slide 1  |

我在想一种直观的动画方式是：

1. 动画幻灯片 1向左，屏幕外
2. （以某种方式将幻灯片 1 从屏幕上移到幻灯片 5 的右侧）
3. 然后从右侧为幻灯片 1 设置动画，使其与幻灯片 5 相邻

但是，我不确定如何在没有 javascript 的情况下执行第 2 步：Is there a CSS transition way？也许是使用关键帧或其他东西的 CSS 动画方式？谢谢！