如何用CSS实现以不同HTML元素为帧的帧动画？

需求说明 #

现有HTML结构如下，需要实现三个span帧的循环显示，同一时间仅展示一个帧，循环顺序为 . → .. → ... → 重复：

<div class="terminal-loader">
    <span>.</span>
    <span>..</span>
    <span>...</span>
</div>

原尝试的问题 #

你的代码存在两个关键问题：

• 原生CSS不支持:eq()选择器，需改用原生的:nth-child()
• 动画的steps函数与延迟设置逻辑错误，无法实现单帧切换的效果

纯CSS解决方案 #

完整代码 #

body {
    background: black;
    --color: #ccc;
    color: var(--color);
    --size: 5;
}
.terminal-loader {
    color: var(--color);
    font-size: calc(var(--size, 1) * 14px);
    position: relative;
    /* 固定容器宽高，避免帧切换时布局晃动 */
    width: calc(var(--size, 1) * 14px * 3);
    height: calc(var(--size, 1) * 14px);
}
.terminal-loader span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    /* 总时长3秒对应3个帧各显示1秒，无限循环 */
    animation: frameSwitch 3s infinite steps(1, end);
}
/* 给每个span设置递增延迟，实现依次显示 */
.terminal-loader span:nth-child(1) {
    animation-delay: 0s;
}
.terminal-loader span:nth-child(2) {
    animation-delay: 1s;
}
.terminal-loader span:nth-child(3) {
    animation-delay: 2s;
}

@keyframes frameSwitch {
    /* 前33.33%时间保持显示，之后隐藏，配合steps实现单帧停留 */
    0%, 33.33% {
        opacity: 1;
    }
    33.34%, 100% {
        opacity: 0;
    }
}

<div class="terminal-loader">
    <span>.</span>
    <span>..</span>
    <span>...</span>
</div>

原理说明 #

1. 容器布局：给.terminal-loader设置固定宽高，避免不同帧的字符长度差异导致布局晃动
2. 帧定位：所有span绝对定位在容器左上角，初始透明度为0，确保同一时间仅一个span可见
3. 动画逻辑：
   • 每个span的动画时长设为3秒（对应3个帧各占1秒），steps(1, end)让动画在关键帧处直接跳变，无过渡效果
   • 关键帧frameSwitch设置前33.33%时间保持opacity:1（即每个帧显示1秒），之后切换为0
   • 通过给每个span设置依次递增1秒的延迟，实现. → .. → ...的循环切换顺序

内容的提问来源于stack exchange，提问作者jcubic