本文详解如何仅用 CSS 实现 4×4 网格中正方形的无限循环对角翻转动画：按序翻转 → 淡出消失 → 全部重置复位，全程无需 JavaScript。核心在于精确设计多段式关键帧与时间轴对齐，并利用 animation-iteration-count: infinite 驱动闭环。
本文详解如何仅用 css 实现 4×4 网格中正方形的无限循环对角翻转动画：按序翻转 → 淡出消失 → 全部重置复位，全程无需 javascript。核心在于精确设计多段式关键帧与时间轴对齐，并利用 `animation-iteration-count: infinite` 驱动闭环。
要实现真正「无限循环」的 staggered（交错）翻转动画——即：所有方块初始显示 → 第1、4号方块翻转并淡出 → 第2、3号方块翻转并淡出 → 所有方块复位并重新显示 → 循环重启——纯 CSS 完全可行，但需突破“单动画单行为”的思维定式，转而采用统一时长、分段控制、精准锚点的关键帧策略。
✅ 核心思路：5 秒完整周期 + 百分比驱动
整个动画被封装为一个 5 秒（5s）的完整周期，所有动画均基于该时间轴同步运行。通过 @keyframes 在不同百分比位置定义状态变化（翻转、隐藏、复位、显现），再配合 animation-duration: 5s 和 animation-iteration-count: infinite，即可自然形成无缝循环。
例如，第1号方块的翻转动画 flip_1 定义如下：
@keyframes flip_1 {
0% {
transform: none;
backface-visibility: hidden;
}
10%, 79.99% {
transform: rotateY(180deg);
backface-visibility: visible;
}
80% {
transform: none;
backface-visibility: hidden;
}
}- 0%：初始未翻转状态
- 10%（即 0.5s）：完成翻转（Y轴旋转180°）
- 79.99%：保持翻转态，为后续复位留出临界窗口
- 80%（即 4s）：瞬间复位（回到初始角度），为下一轮做准备
同理，第4号方块翻转起始延后至 20%（对应 1s），确保与第1号形成对角交错；而第2、3号则分别在 40% 和 60% 启动，构成完整「1–4 → 2–3」序列。
立即学习“前端免费学习笔记（深入）”；
✅ 淡入淡出与复位协同控制
仅翻转不够，还需控制可见性。我们为成对元素（如 1 & 4）共用一套淡出/淡入动画 fade_1_4：
@keyframes fade_1_4 {
30% { opacity: 1; } /* 翻转完成后开始淡出 */
40%, 80% { opacity: 0; } /* 40%完全透明；80%仍保持隐藏，等待复位完成 */
90% { opacity: 1; } /* 4.5s时重新完全显现 */
}关键技巧在于：
- 40%（2s）完成淡出 → 此时1、4已翻转完毕且不可见
- 80%（4s）仍为 opacity: 0，确保复位动作（transform 归零）不被用户察觉
- 90%（4.5s）淡入 → 与复位后的初始态同步显现，视觉上等效于“重载”
所有 .flip-card 元素应用该淡出动画，.flip-card-inner 则应用对应翻转动画，二者共享 5s 周期与 infinite 迭代，天然同步。
✅ 实际应用要点与注意事项
- 避免使用 animation-delay：原方案依赖 animation-delay 实现交错，但延迟值无法参与循环重置，会导致第二轮错位。新方案全部改用百分比关键帧，确保每轮起点一致。
- backface-visibility 必须显式声明：在 0% 和 80% 等关键节点重复设置 backface-visibility: hidden，防止 Safari 等浏览器因渲染优化导致背面意外可见。
- 79.99% 而非 80% 的精妙设计：为翻转动画留出微小过渡间隙，避免 80% 复位帧与 80% 淡出帧竞争导致闪烁或跳变。
- 网格结构保持简洁：本例为 2×2 子集（共4块），若扩展至 4×4（16块），只需按相同逻辑扩展关键帧（如 flip_5～flip_16）并调整百分比分布，无需修改 HTML 结构。
- 性能提示：启用 will-change: transform, opacity 可进一步提升动画流畅度（尤其在低端设备），但非必需。
最终效果是：每5秒，四块方块严格按「1&4 → 2&3」对角顺序翻转、淡出、复位、重现，节奏稳定、无 JS 干预、兼容现代主流浏览器（Chrome/Firefox/Safari 15.4+）。这不仅是技巧实践，更是对 CSS 动画时间建模能力的一次深度验证。
