如何实现依次弹跳的省略号CSS动画效果？

你当前代码的问题是所有圆点共享相同的动画且无延迟，导致同步脉冲。要实现依次弹跳的效果，只需给每个圆点添加动画延迟，并调整关键帧让每个圆点在周期内仅完成一次弹跳动作。

修改后的完整代码 #

.ellipsis {
    display: flex;
}
.ellipsis div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    margin: 0 5px;
    animation: bounce 1.2s linear infinite;
    opacity: 0.2;
    transform: scale(0.8);
}
/* 错开第二个圆点的动画启动时间 */
.ellipsis div:nth-child(2) {
    animation-delay: 0.4s;
}
/* 错开第三个圆点的动画启动时间 */
.ellipsis div:nth-child(3) {
    animation-delay: 0.8s;
}

@keyframes bounce {
    /* 1/6周期时达到最大状态 */
    16.67% {
        opacity: 1;
        transform: scale(1);
    }
    /* 1/3周期时回到初始状态 */
    33.33% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    /* 剩余时间保持初始状态，等待下一轮循环 */
}

<div class="ellipsis">
    <div></div>
    <div></div>
    <div></div>
</div>

核心逻辑说明 #

• 动画时长与延迟匹配：总动画时长设为1.2s，每个圆点的延迟依次增加0.4s（总时长的1/3），确保三个圆点刚好在一个周期内依次完成弹跳，循环时无缝衔接。
• 简化关键帧：每个圆点仅在动画前1/3周期完成「放大显示→缩小恢复」的动作，剩余时间保持初始状态，避免重复触发动画导致同步问题。
• 初始状态固化：直接在元素样式中定义初始的半透明缩小状态，无需在关键帧的0%和100%重复声明，代码更简洁。

内容的提问来源于stack exchange，提问作者D. Thaler