如何修改CSS动画实现无缝循环图片Carousel效果？

要实现图片移出屏幕后无缝出现在末尾的循环效果，核心是通过复制图片列表让动画滚动时视觉上无断点，具体修改如下：

关键改动说明 #

1. 复制图片列表：在原图片后再添加一份完全相同的图片，这样当原列表滚动出视野时，复制的列表会衔接在后面，避免出现空白。
2. 调整动画滚动距离：让动画的最终滚动距离等于单份图片列表的总宽度（包含图片间距），这样动画结束时，复制列表的起始位置刚好和原列表初始位置重合，此时动画重置不会出现视觉卡顿。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Image Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
    <style>
        .scrolling-images-wrapper {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 220px;
        }

        .scrolling-images {
            display: flex;
            animation: scroll 20s linear infinite;
        }

        .scrolling-images img {
            width: 200px;
            height: 200px;
            margin-right: 16px;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-632px); /* 单份列表总宽度：200*3 + 16*2 = 632px */
            }
        }
    </style>

<style>
    @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
    }

    @keyframes progress {
        0% { width: 0; }
        100% { width: 100%; }
    }

    @keyframes robot {
        0% { left: 0; }
        100% { left: calc(100% - 30px); }
    }
</style>
</head>

<body class="bg-gray-100 font-sans">
    <section class="scrolling-images-wrapper">
        <div class="scrolling-images">
            <img src="https://placehold.co/200?text=Image1" alt="Image1">
            <img src="https://placehold.co/200?text=Image2" alt="Image2">
            <img src="https://placehold.co/200?text=Image3" alt="Image3">
            <!-- 复制一份图片，实现无缝衔接 -->
            <img src="https://placehold.co/200?text=Image1" alt="Image1">
            <img src="https://placehold.co/200?text=Image2" alt="Image2">
            <img src="https://placehold.co/200?text=Image3" alt="Image3">
        </div>
    </section>
</body>

</html>

原理详解 #

当动画滚动到100%位置时，原图片列表刚好完全移出屏幕，此时复制的图片列表刚好占据原列表的初始位置。由于动画是linear infinite，会瞬间从100%跳回0%，但因为复制的列表和原列表完全一致，用户视觉上感知不到跳转，只会看到Image1紧接着Image3从右侧滑入，实现无缝循环。

内容的提问来源于stack exchange，提问作者Carol.Kar