本文详解如何仅用 css 实现 4×4 网格中按对角顺序（1→4、2→3）逐个翻转、隐藏，再整体重置并无限循环的动画效果，无需 javascript，核心在于精确控制关键帧时间点与多动画协同。
本文详解如何仅用 css 实现 4×4 网格中按对角顺序（1→4、2→3）逐个翻转、隐藏，再整体重置并无限循环的动画效果，无需 javascript，核心在于精确控制关键帧时间点与多动画协同。
要实现纯 CSS 的无限 staggered 动画循环——即“显示全部 → 对角翻转+隐藏（1&4）→ 另一对角翻转+隐藏（2&3）→ 全部重置 → 重复”——关键在于将整个周期抽象为一个统一的时间轴（例如 5 秒），并为每个元素定义分阶段、高精度百分比控制的关键帧动画，而非依赖 animation-delay（它无法自然循环重置状态）。
✅ 核心思路：单周期统一定时 + 阶段化关键帧
原方案使用 animation-delay 导致动画无法真正“循环”：延迟只作用于首次播放，后续迭代无法重置初始状态。正确解法是：
- 设定统一 animation-duration: 5s 和 animation-iteration-count: infinite；
- 将完整流程拆解为 5 秒内 6 个逻辑阶段（单位：秒 → 百分比）：
- 0%：所有卡片初始状态（未翻转、不透明）
- 10%：卡片 1 完成翻转（180°）
- 20%：卡片 4 开始翻转
- 30%：卡片 4 翻转完成，卡片 1 & 4 开始淡出
- 40%：卡片 1 & 4 完全透明，卡片 2 开始翻转
- 50%：卡片 2 翻转完成
- 60%：卡片 3 开始翻转
- 70%：卡片 3 翻转完成，卡片 2 & 3 开始淡出
- 79.99%：卡片 2 & 3 完全透明，所有卡片准备重置（保留最后一帧可见性）
- 80%：所有卡片瞬间还原为未翻转状态（transform: none）
- 90%：所有卡片完全恢复不透明（opacity: 1）
- 100%：等待 0.5 秒后无缝进入下一周期
⚠️ 注意：79.99% 与 80% 的微小间隔至关重要——它确保 opacity: 0 在重置前生效，避免视觉闪烁；而 80% 处强制 transform: none 与 backface-visibility: hidden 才能真正“归零”翻转状态。
? 关键帧定义示例（精简版）
/* 卡片 1 翻转动画：0%→10%翻转，79.99%→80%重置 */
@keyframes flip_1 {
0% { transform: none; backface-visibility: hidden; }
10% { transform: rotateY(180deg); backface-visibility: visible; }
79.99% { transform: rotateY(180deg); backface-visibility: visible; }
80% { transform: none; backface-visibility: hidden; }
}
/* 卡片 1 & 4 共享淡入/淡出动画 */
@keyframes fade_1_4 {
30% { opacity: 1; } /* 开始淡出 */
40% { opacity: 0; } /* 淡出完成 */
80% { opacity: 0; } /* 保持隐藏直至重置点 */
90% { opacity: 1; } /* 淡入恢复 */
}
同理定义 flip_4（起始 20%）、flip_2（40%）、flip_3（60%），以及 fade_2_3（70%→79.99% 淡出，80%→90% 淡入）。
? 应用动画到 DOM 元素
.flip-card:nth-child(1) { animation: fade_1_4 5s infinite; }
.flip-card:nth-child(4) { animation: fade_1_4 5s infinite; }
.flip-card:nth-child(1) .flip-card-inner { animation: flip_1 5s infinite; }
.flip-card:nth-child(4) .flip-card-inner { animation: flip_4 5s infinite; }
.flip-card:nth-child(2) { animation: fade_2_3 5s infinite; }
.flip-card:nth-child(3) { animation: fade_2_3 5s infinite; }
.flip-card:nth-child(2) .flip-card-inner { animation: flip_2 5s infinite; }
.flip-card:nth-child(3) .flip-card-inner { animation: flip_3 5s infinite; }
/* 统一基础属性 */
.flip-card, .flip-card-inner {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear; /* 保证节奏稳定 */
}
? 重要注意事项
- backface-visibility 必须显式声明：在 0% 和 80% 帧中设为 hidden，否则重置后可能残留背面内容；
- 避免 transition 干扰：.flip-card 和 .flip-card-inner 的 transition 属性需移除或设为 none，否则会与 animation 冲突；
- HTML 结构需严格对应：.flip-card 必须为直接子元素，且顺序为 1→2→3→4，nth-child() 选择器才准确匹配；
- 性能优化建议：添加 will-change: transform, opacity; 到 .flip-card 提升渲染效率（尤其在复杂页面中）；
- 可扩展性提示：若需扩展至 4×4 网格（16 个卡片），可按 (row-1)*4 + col 计算索引，批量生成对应关键帧与选择器（建议配合 CSS 预处理器如 Sass 自动化）。
通过这种基于时间轴的精细化关键帧设计，CSS 不仅能实现复杂的 staggered 序列，更能保证无限循环的无缝性与状态一致性——这是 animation-delay 无法达成的真正循环闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
