CSS如何制作加载时的点点点跳动效果_使用animation循环延迟

三个点逐帧跳动效果本质是错开节奏的垂直位移，需用@keyframes定义单点动画并为每个点单独设置animation-delay，配合伪元素生成点、rem/ch单位响应式适配及GPU加速优化。用 @keyframes 定义三个点的逐帧位移跳动效果本质是三个 . 字符（或伪元素）在垂直方向上按顺序起伏，不是同时上下。关键不是“动”，而是“错开节奏”。直接写 transform: translateY() 不够，必须用 @keyframes 分三段控制：第一个点先升、第二个稍后、第三个再晚一点。常见错误是把三个点写成同一个动画实例，结果一起弹——得给每个点单独设 animation-delay。比如：@keyframes dot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); }}然后分别作用在三个 ::after 上，延迟值设为 0s、0.2s、0.4s。用 ::after 伪元素生成点，避免 HTML 冗余不用在 HTML 里写三个 <span>.</span>，既难维护又增加语义噪音。纯 CSS 就能搞定：给容器加一个类，用 ::after 生成内容，再通过 content 和 letter-spacing 控制点间距。立即学习“前端免费学习笔记（深入）”；实操建议：用 display: inline-block 让伪元素可定位，否则 transform 可能不生效三个点用同一伪元素 + content: "..." 最省事，但无法单独控制每个点的动画——所以更推荐三个独立伪元素：::after、::before、:first-line 不靠谱，改用 div::before + div::after + div > span:first-child 组合如果用字体图标或 SVG 替代文本点，注意 vertical-align 值，不然跳动会偏移基线animation 的循环与延迟参数必须配对写死只写 animation: dot-bounce 1.2s infinite 是不够的。三个点要“错开跳”，就得显式补全所有参数，尤其是 animation-delay 和 animation-duration 必须一致，否则节奏乱。 唱鸭 音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体