如何纯 CSS 实现三箭头循环滑入滑出动画（无需 JavaScript）-html教程-PHP中文网

如何纯 CSS 实现三箭头循环滑入滑出动画（无需 JavaScript）

本文详解如何仅用 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 方案：

CSS工具箱(专业版)

全功能 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。