CSS 实现无限循环的交错翻转与淡入淡出动画序列-html教程-PHP中文网

CSS 实现无限循环的交错翻转与淡入淡出动画序列

本文详解如何仅用纯 css 实现 4×4 网格中正方形的无限循环 staggered 动画：按对角线顺序（1→4→2→3）逐个翻转、隐藏，再整体重置并重新开始，全程无需 javascript。

本文详解如何仅用纯 css 实现 4×4 网格中正方形的无限循环 staggered 动画：按对角线顺序（1→4→2→3）逐个翻转、隐藏，再整体重置并重新开始，全程无需 javascript。

要实现真正无限循环的 staggered 动画序列（如对角翻转 → 成对消失 → 全部重置 → 重启），关键在于放弃“分段延迟 + 单次播放”的旧思路，转而采用统一时长、百分比驱动、状态闭环的 CSS 动画设计策略。

核心思想是：将整个周期（例如 5 秒）划分为精确的时间节点，用 @keyframes 定义每个元素在各阶段的 transform、opacity 和 backface-visibility 状态，并通过 animation-duration: 5s; animation-iteration-count: infinite; 实现无缝循环。

✅ 关键技术要点解析

统一动画时长：所有 .flip-card 和 .flip-card-inner 均设置 animation-duration: 5s，确保所有动画同步复位。
百分比时间轴规划：以 0%–100% 映射完整周期（0s–5s），例如：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
- 0%–10%（0–0.5s）：卡片 1 开始翻转
- 20%–30%（1–1.5s）：卡片 4 翻转
- 30%–40%（1.5–2s）：卡片 1 & 4 淡出
- 79.99%：所有卡片恢复初始状态（避免 80% 处因四舍五入导致闪烁）
- 80%–90%（4–4.5s）：全部淡入，准备下一循环
独立控制翻转与透明度：
- .flip-card-inner 绑定专属 flip_* 动画（控制 transform: rotateY() 和 backface-visibility）
- .flip-card 自身绑定 fade_* 动画（控制 opacity），实现视觉上的“消失/重现”

? 示例关键动画定义（精简版）

@keyframes flip_1 {
  0%   { transform: none; backface-visibility: hidden; }
  10%, 79.99% { transform: rotateY(180deg); backface-visibility: visible; }
  80%  { transform: none; backface-visibility: hidden; }
}

@keyframes fade_1_4 {
  30%  { opacity: 1; }     /* 开始淡出 */
  40%, 80% { opacity: 0; } /* 完全隐藏 + 重置点 */
  90%  { opacity: 1; }     /* 完全淡入，为下轮准备 */
}

⚠️ 注意：79.99% 而非 80% 是为避免浏览器在关键帧边界处插值异常；80% 才真正重置状态，确保循环起点干净无残留。

? 应用到 HTML 元素

/* 卡片 1 翻转 + 卡片 1&4 淡出 */
.flip-card:nth-child(1) .flip-card-inner { animation-name: flip_1; }
.flip-card:nth-child(1), 
.flip-card:nth-child(4) { animation-name: fade_1_4; }

/* 卡片 4 翻转（独立时间轴） */
.flip-card:nth-child(4) .flip-card-inner { animation-name: flip_4; }

/* 同理处理卡片 2 & 3 */
.flip-card:nth-child(2) .flip-card-inner { animation-name: flip_2; }
.flip-card:nth-child(3) .flip-card-inner { animation-name: flip_3; }
.flip-card:nth-child(2), 
.flip-card:nth-child(3) { animation-name: fade_2_3; }