仅使用CSS实现多div循环翻牌效果，如何调整各div的动画时序？

原有代码问题梳理 #

• 动画周期拆分错误：3张卡片的单张展示+翻转时间分配不合理，总周期下每张卡片的可见时间未对齐
• 初始旋转状态缺失：未给非首屏卡片设置初始的rotateY(180deg)，导致backface-visibility: hidden属性未生效，出现卡片重叠
• 时序配合逻辑错误：动画延迟未和单卡片的展示周期对齐，切换逻辑混乱

核心实现逻辑 #

通过CSS变量实现自适应适配，仅需修改两个配置项即可调整卡片数量和翻牌速度，无需重写动画逻辑：

1. 定义全局配置变量：总动画周期、卡片数量，自动计算单张卡片的展示时长
2. 每张卡片通过自定义序号变量设置错开的动画延迟，实现顺序衔接
3. 调整关键帧逻辑，让每张卡片仅在自己的周期内正面可见，其余时间背面隐藏

完整实现代码 #

HTML结构 #

<div class="card">
  <!-- 有多少张卡片就加多少个，--i从0开始依次递增 -->
  <div class="card-item" style="--i:0; background: pink;"></div>
  <div class="card-item" style="--i:1; background: yellow;"></div>
  <div class="card-item" style="--i:2; background: black;"></div>
  <div class="card-item" style="--i:3; background: blue;"></div>
</div>

CSS代码 #

.card {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  /* 自定义配置：总动画周期、卡片数量，改数量直接调整这两个变量即可 */
  --total-duration: 8s;
  --card-count: 4;
  --single-duration: calc(var(--total-duration) / var(--card-count));
}

.card-item {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* 非首屏卡片默认翻转到背面隐藏 */
  transform: rotateY(180deg);
  animation: flip var(--total-duration) linear infinite;
  /* 按序号依次设置延迟 */
  animation-delay: calc(var(--single-duration) * var(--i));
}

@keyframes flip {
  /* 0时刻刚好翻到正面，可见 */
  0% {
    transform: rotateY(0deg);
  }
  /* 到单张卡片的展示周期结束时，翻到背面隐藏，百分比值为 100/卡片数量 */
  25%, 100% {
    transform: rotateY(180deg);
  }
}

调整说明 #

• 增减卡片数量：修改.card上的--card-count变量，增删对应card-item节点，同时把关键帧里的第一个百分比值调整为100/卡片数量即可（比如3张卡设为33.33%，5张卡设为20%）
• 调整翻牌速度：修改--total-duration的数值，数值越大翻牌速度越慢

内容的提问来源于stack exchange，提问作者Jaye Park