本文详解如何仅用 css 实现三个箭头按序逐个滑入、再反向滑出的无限循环加载动画，避免 javascript 依赖，通过独立关键帧 + 精确时间偏移实现流畅序列效果。
本文详解如何仅用 css 实现三个箭头按序逐个滑入、再反向滑出的无限循环加载动画，避免 javascript 依赖，通过独立关键帧 + 精确时间偏移实现流畅序列效果。
在构建加载提示（loading indicator）时，常需呈现“动态入场 → 暂留 → 依次退场”的视觉节奏，例如：箭头1滑入 → 箭头2滑入 → 箭头3滑入 → 箭头3滑出 → 箭头2滑出 → 箭头1滑出，然后循环。许多开发者误以为必须借助 JavaScript 控制 animation-name 切换，但其实纯 CSS 完全可胜任——关键在于为每个箭头定义专属动画，并通过 @keyframes 中的多段百分比控制不同时刻的 opacity 和 left（或 transform）状态，再配合 animation-delay 或 nth-child 精准调度。
以下是一个健壮、可维护的纯 CSS 方案：
✅ 核心思路
- 每个箭头使用独立
@keyframes（arrow1/arrow2/arrow3），明确其完整生命周期（入场 → 显示 → 退场）； - 利用
0%,12.5%,25%… 等细分时间点，精确划分「隐藏→显示→隐藏」区间； - 使用
left位移模拟滑动（兼容性优于transform: translateX()在部分旧浏览器中的动画重绘问题），配合opacity实现淡入淡出； - 通过
.arrows .arrow:nth-child(n)绑定对应动画，消除冗余 class（如arrow_1），提升语义性与可扩展性。
? 完整 CSS 示例（含注释）
/* 基础布局与箭头通用样式 */
html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f4f4f4;
color: #EE4036;
font-family: Arial, sans-serif;
font-weight: bolder;
font-size: xx-large;
}
.arrows {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding-left: 6px;
gap: 3px;
}
.arrow {
position: relative;
width: 10px;
height: 10px;
background: #EE4036;
border-top-right-radius: 30%;
transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
rotate: 90deg;
opacity: 0;
/* 关键：不设默认 animation，由子选择器单独指定 */
}
/* 箭头伪元素构成 */
.arrow::before,
.arrow::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background: inherit;
border-top-right-radius: inherit;
}
.arrow::before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translateY(-50%);
}
.arrow::after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translateX(50%);
}
/* —— 各箭头专属动画 —— */
@keyframes arrow1 {
/* 隐藏（左偏移）→ 显示（居中）→ 隐藏（右偏移） */
0%, 12.5% { opacity: 0; left: -10px; }
25%, 75% { opacity: 1; left: 0; }
87.5%, 100% { opacity: 0; left: 10px; }
}
@keyframes arrow2 {
0%, 12.5% { opacity: 0; left: -10px; }
25%, 62.5% { opacity: 1; left: 0; }
75%, 100% { opacity: 0; left: 10px; }
}
@keyframes arrow3 {
0%, 25% { opacity: 0; left: -10px; }
37.5%, 50% { opacity: 1; left: 0; }
62.5%, 100% { opacity: 0; left: 10px; }
}
/* 为每个箭头绑定对应动画，周期统一为 3.5s，无缝循环 */
.arrows .arrow:nth-child(1) { animation: arrow1 3.5s infinite; }
.arrows .arrow:nth-child(2) { animation: arrow2 3.5s infinite; }
.arrows .arrow:nth-child(3) { animation: arrow3 3.5s infinite; }? 对应 HTML（极简无 JS）
<section>
<div class="loading">Loading</div>
<section class="arrows">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</section>
</section>⚠️ 注意事项与优化建议
-
避免
transform与left混用：本例采用left是为了在position: relative下更直观控制位移；若追求更高性能，可改用transform: translateX()，但需确保父容器未触发will-change或transform层叠上下文干扰。 - 时间轴对齐逻辑：3.5s 总周期内，每个动画占 12.5% ≈ 437.5ms 的“高亮显示期”，确保三箭头视觉节奏紧凑且不重叠。
-
可扩展性：如需增加第4个箭头，只需新增
@keyframes arrow4并调整各阶段百分比（如起始延迟 37.5%），再添加:nth-child(4)规则即可。 -
兼容性：
@keyframes和nth-child在所有现代浏览器及 IE10+ 均支持；若需支持 IE9，建议降级为固定 class 名 +animation-name。
✅ 最终效果：无需一行 JavaScript，三个箭头严格按「1→2→3→3→2→1」顺序循环滑动，动画平滑、代码清晰、易于调试与复用。CSS 动画的本质是时间编程——善用百分比关键帧，就是掌握前端交互动效的核心能力。
