如何计算CSS3滑块新关键帧百分比并调整动画时长？

别着急，我来帮你把这个关键帧的逻辑理清楚，其实核心就是把每张图的显示时长、过渡时长转换成总动画时长的百分比，再对应到关键帧上就行。我一步步给你拆解：

第一步：确定总时长与阶段划分 #

你已经明确了需求：总动画时长62秒，第一张图显示32秒，其余三张各显示10秒。为了保持平滑的切换效果，我们给每次图的切换保留0.5秒的过渡时间（这个时间你可以根据需求调整，比如改成1秒，只要对应调整总时长或显示时长就行），把过渡时间嵌入到每张图的分配时长里：

• 图1：31.5秒完全可见 + 0.5秒过渡 = 32秒
• 图2：9.5秒完全可见 + 0.5秒过渡 = 10秒
• 图3：9.5秒完全可见 + 0.5秒过渡 = 10秒
• 图4：9.5秒完全可见 + 0.5秒过渡 = 10秒
  总时长刚好是32+10+10+10=62秒，完美匹配你的要求。

第二步：计算关键帧百分比 #

我们需要把每个时间节点转换成总时长的百分比（百分比 = 节点时间 / 总时长 × 100%），得到以下关键节点：

第三步：修改后的完整代码 #

根据上面的百分比，我们调整每个图的关键帧和动画时长，以下是修改后的代码，我加了注释方便你理解：

/* 图1：总动画时长改为62秒，循环播放 */
.slide > figure:nth-child(1) {
  z-index: 4;
  opacity: 1;
  animation: slide1 62s infinite;
  -webkit-animation: slide1 62s infinite;
  -moz-animation: slide1 62s infinite;
  -o-animation: slide1 62s infinite;
}

@keyframes slide1 {
  /* 动画开始：完全可见，z-index最高 */
  0% { opacity: 1; z-index: 5; }
  /* 31.5秒时（50.81%）：保持完全可见 */
  50.81% { opacity: 1; z-index: 5; }
  /* 32秒时（51.61%）：过渡到透明，保持高z-index避免被遮挡 */
  51.61% { opacity: 0; z-index: 5; }
  /* 过渡完成后：z-index降到最低，保持透明 */
  51.62% { opacity: 0; z-index: 1; }
  /* 直到动画接近结束（61.5秒，99.19%）：保持透明 */
  99.19% { opacity: 0; z-index: 1; }
  /* 回到初始状态：恢复可见，z-index回到最高 */
  99.2% { opacity: 1; z-index: 1; }
  100% { opacity: 1; z-index: 5; }
}

/* 图2：总动画时长62秒，循环播放 */
.slide > figure:nth-child(2) {
  z-index: 3;
  opacity: 0;
  animation: slide2 62s infinite;
  -webkit-animation: slide2 62s infinite;
  -moz-animation: slide2 62s infinite;
  -o-animation: slide2 62s infinite;
}

@keyframes slide2 {
  /* 动画开始：透明，z-index次高 */
  0% { opacity: 0; z-index: 4; }
  /* 32秒时（51.61%）：开始过渡到可见 */
  51.61% { opacity: 0; z-index: 4; }
  51.62% { opacity: 1; z-index: 4; }
  /* 41.5秒时（66.94%）：保持完全可见 */
  66.94% { opacity: 1; z-index: 4; }
  /* 42秒时（67.74%）：过渡到透明，z-index降低 */
  67.74% { opacity: 1; z-index: 3; }
  67.75% { opacity: 0; z-index: 3; }
  /* 动画结束前：保持透明 */
  100% { opacity: 0; z-index: 3; }
}

/* 图3：总动画时长62秒，循环播放 */
.slide > figure:nth-child(3) {
  z-index: 2;
  opacity: 0;
  animation: slide3 62s infinite;
  -webkit-animation: slide3 62s infinite;
  -moz-animation: slide3 62s infinite;
  -o-animation: slide3 62s infinite;
}

@keyframes slide3 {
  /* 动画开始：透明，z-index第三 */
  0% { opacity: 0; z-index: 3; }
  /* 42秒时（67.74%）：开始过渡到可见 */
  67.74% { opacity: 0; z-index: 3; }
  67.75% { opacity: 1; z-index: 3; }
  /* 51.5秒时（83.06%）：保持完全可见 */
  83.06% { opacity: 1; z-index: 3; }
  /* 52秒时（83.87%）：过渡到透明，z-index降低 */
  83.87% { opacity: 1; z-index: 2; }
  83.88% { opacity: 0; z-index: 2; }
  /* 动画结束前：保持透明 */
  100% { opacity: 0; z-index: 2; }
}

/* 图4：总动画时长62秒，循环播放 */
.slide > figure:nth-child(4) {
  z-index: 1;
  opacity: 0;
  animation: slide4 62s infinite;
  -webkit-animation: slide4 62s infinite;
  -moz-animation: slide4 62s infinite;
  -o-animation: slide4 62s infinite;
}

@keyframes slide4 {
  /* 动画开始：透明，z-index最低 */
  0% { opacity: 0; z-index: 2; }
  /* 52秒时（83.87%）：开始过渡到可见 */
  83.87% { opacity: 0; z-index: 2; }
  83.88% { opacity: 1; z-index: 2; }
  /* 61.5秒时（99.19%）：保持完全可见 */
  99.19% { opacity: 1; z-index: 2; }
  /* 62秒时（100%）：过渡到透明，z-index降低 */
  99.2% { opacity: 1; z-index: 1; }
  100% { opacity: 0; z-index: 1; }
}

关键逻辑解释 #

1. z-index控制：显示中的图保持最高z-index，过渡完成后降低z-index，避免遮挡下一张要显示的图。
2. 过渡区间：用极小的百分比区间（比如51.61%到51.62%）实现平滑的透明度切换，你可以根据需要调整这个区间的大小来控制过渡速度。
3. 循环衔接：最后图4的过渡结束后，图1刚好回到可见状态，保证动画循环无卡顿。

如果以后你需要调整时长，只需要重复这三个步骤：确定总时长→划分各阶段时间→转换成百分比→修改关键帧即可。

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