怎样制作css加载中的三个点跳动动画_设置animation-delay延时队列-css教程-PHP中文网

三个点依次跳动的核心逻辑是共用同一@keyframes动画，仅通过animation-delay（0s、0.2s、0.4s）错开启动时机，配合infinite循环与恰当的duration（如1s），实现简洁可维护的节奏队列。

怎样制作css加载中的三个点跳动动画_设置animation-delay延时队列

用 `@keyframes` 实现三个点依次跳动的核心逻辑

三个点跳动不是靠“随机延时”，而是让每个点复用同一段动画，但用 animation-delay 错开启动时机。关键在于：三个点必须使用相同 animation-name 和相同动画曲线（比如 ease-in-out），仅靠 animation-delay 形成节奏差。

常见错误是给每个点写三段不同 @keyframes，既冗余又难维护；或者误以为 animation-delay 能控制单次循环内的延迟——它只控制动画第一次播放前的等待时间。

动画本身只需定义一个上下位移（如 transform: translateY(-4px) → translateY(4px)）
三个点共用同一个 @keyframes bounce
animation-delay 分别设为 0s、0.2s、0.4s，形成 0.2 秒间隔队列
动画时长（animation-duration）建议设为 1s 或 1.2s，太短会显得急促，太长则节奏拖沓

`animation-delay` 的实际生效条件和兼容性注意点

animation-delay 只在元素首次进入渲染流（或 display 从 none 变为可见）时触发一次，之后循环播放不再重新计算延迟。如果元素被 JS 动态插入或 visibility: hidden 切换，延迟不会重置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须配合 animation-iteration-count: infinite 才能持续循环，否则只播一次就停
IE10+ 支持，但 IE10 不支持 animation-fill-mode: backwards，所以延迟期间元素会保持初始状态（不推荐在 IE 场景用此效果）
若用 opacity 配合跳动，记得把 animation-fill-mode 设为 both，否则延迟期透明度可能异常
移动端 Safari 对小数值（如 0.15s）延迟解析较粗，建议用 0.2s 这类整数倍步进

HTML 结构与 CSS 类名如何避免命名冲突和样式污染

三个点通常用或伪元素生成，不建议用三个独立

 增加 DOM 深度。更稳妥的方式是用一个容器 + ::after 和 ::before 补齐三点，或用 display: inline-flex + :nth-child() 精确控制。
推荐结构：，再用 .loading-dots::before、.loading-dots、.loading-dots::after 表示三点
每个点需设 display: inline-block 或 flex 子项，否则 transform 可能失效
避免用 margin-left 间距，改用 gap（Flex）或 inline-gap（未来），更稳定
如果项目已用 Tailwind，可用 animate-bounce + 自定义 delay-[200]、delay-[400]，但需确认其 @layer utilities 已启用

调试时 animation-play-state 和 DevTools 的实用技巧
Chrome/Firefox DevTools 的 Animations 面板能直接暂停、慢放、修改 animation-delay 实时预览，比反复改代码高效得多。但要注意：面板里拖动时间轴只能影响当前循环，不能改变 delay 值本身。

临时冻结动画：在 Elements 面板勾选 animation-play-state: paused，观察各点静止位置是否符合预期
验证延迟是否生效：把 animation-duration 拉长到 5s，肉眼就能看清三点是否严格按 0 / 0.2 / 0.4 秒启动
容易忽略的坑：父容器有 overflow: hidden 时，跳动超出范围会被裁剪，加 margin-top: -4px 微调基线
如果三点跳动不同步，优先检查是否意外触发了多次 animation（比如 JS 重复添加 class，或 Vue 中 key 变化导致重渲染）



三个点动画看似简单，真正难的是在各种上下文（SSR、动态组件、暗色模式切换）中保持延迟队列不崩。最稳的做法是把 delay 值抽成 CSS 变量（如 --dot-delay: 0.2s），后续维护和主题适配都方便。