无需登录 数据私有 本地保存

加载打字动画生成 - 三点跳跃CSS

15
0
0
0
实时预览
背景：
经典灰
微信绿
活泼彩
大加载
脉动缩放
极简小
参数调节
三个点依次延迟，形成波浪效果
点1
点2
点3
50%为圆形，0为方形
生成代码
将代码粘贴到你的HTML文件中即可使用。CSS可放入<style>标签或外部样式表。
常见问题与知识点
什么是三点跳跃加载动画？
三点跳跃动画（Bouncing Dots / Typing Indicator）是一种经典的UI加载指示器，通常由三个小圆点组成，它们依次上下弹跳，模拟"正在输入..."或"加载中"的状态。广泛应用于聊天应用（如微信、WhatsApp）、网页加载状态、表单提交等待等场景。其核心原理是利用CSS @keyframes定义弹跳动画，再通过animation-delay为每个圆点设置不同的延迟，形成连续的波浪跳跃效果。
如何使用CSS实现三点依次跳跃的波浪效果？
核心技巧在于animation-delay属性。三个圆点使用相同的@keyframes动画，但分别设置不同的延迟时间（如0s、0.2s、0.4s）。这样它们不会同步弹跳，而是依次启动，形成视觉上的波浪序列。延迟间隔通常设为动画周期的1/6左右，例如周期1.2s时，间隔取0.2s，确保动画看起来流畅连贯。使用animation-iteration-count: infinite让动画无限循环。
animation-delay属性的作用是什么？负值有什么用？
animation-delay定义动画开始前的等待时间。正值表示延迟指定时间后开始播放；负值则让动画立即开始，但会跳过指定时间的开头部分，相当于从中间帧开始播放。对于三点跳跃动画，使用正延迟值（如0s、0.2s、0.4s）是最直观的做法。如果使用负值，可以让所有点立即动起来但处于不同的动画阶段，效果相同但初始状态更自然。
如何优化CSS动画性能？三点跳跃动画会卡顿吗？
三点跳跃动画使用transform: translateY()或transform: scale()，这些属性只触发合成阶段（Composite），不会引发重排（Reflow）或重绘（Repaint），性能极佳。为进一步优化：① 添加will-change: transform提示浏览器提前优化；② 使用transform: translate3d(0, -15px, 0)强制GPU加速；③ 避免在动画中使用top/left/margin等会触发布局重计算的属性。总体来说，三点跳跃动画非常轻量，几乎不会造成性能问题。
如何在React或Vue项目中使用这个动画？
使用方式与普通HTML项目相同。将生成的CSS代码放入全局样式文件或组件内的<style scoped>（Vue）中，HTML结构放入对应的JSX或template中。在React中，可以使用className替代class；在Vue中直接使用即可。如果需要动态控制显示/隐藏，用v-if（Vue）或条件渲染{loading && }（React）来控制组件的挂载。CSS动画在元素挂载时自动开始播放。
浏览器兼容性如何？移动端支持吗？
CSS @keyframes和animation属性在现代浏览器中兼容性极好，覆盖Chrome 43+、Firefox 16+、Safari 9+、Edge 12+，以及iOS Safari和Android Chrome等移动端浏览器。全球覆盖率超过98%。对于需要兼容IE10的项目，建议添加-ms-前缀或使用GIF动图作为降级方案。移动端表现与桌面端一致，且由于使用transform动画，在低性能设备上也能流畅运行。
能否让动画在页面加载完成后再开始？
可以。默认情况下CSS动画在元素添加到DOM后立即开始。如果需要延迟启动，可以使用JavaScript动态添加动画类名，或使用animation-play-state: paused初始暂停，再通过JS切换为running。例如：先设置.dots { animation-play-state: paused; }，在window.onload或特定事件中将其改为running。也可以结合IntersectionObserver实现滚动到可见区域时才启动动画。
三点跳跃动画和旋转加载圈各有什么适用场景？
三点跳跃动画更常用于聊天场景（表示对方正在输入）、轻量级等待状态、内联加载提示。它给人的感觉是"有人在响应"，带有互动感和期待感。旋转加载圈（Spinner）则更通用，适用于页面级加载、数据请求等待、全屏遮罩加载等场景。三点跳跃更适合短时等待（1-5秒预期），旋转圈适合不确定时长的等待。两者可以结合使用场景选择合适的动画。
🔧 相关工具