如何调整CSS轮播图的淡入淡出时长并延长图片显示时间？

问题描述 #

我基于一段代码创建了轮播图，代码如下：

HTML 结构：

<div class='slider'>
  <div class='slide1'></div>
  <div class='slide2'></div>
  <div class='slide3'></div>
</div>

CSS 样式：

.slider {
  max-width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
  background-size: cover;
  animation:fade 8s infinite;
  -webkit-animation:fade 8s infinite;
} 
.slide2 {
  background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
  background-size: cover;
  animation:fade2 8s infinite;
  -webkit-animation:fade2 8s infinite;
}
.slide3 {
  background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
  background-size: cover;
  animation:fade3 8s infinite;
  -webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

我知道可以修改animation的8s总时长，但想调整淡入淡出的过渡速度，实现更快的淡入淡出+每张图更长的静态显示时间，该怎么做？

解决方案 #

核心是调整@keyframes中的百分比节点，结合总动画时长，把大部分时间分配给静态显示，只在小比例区间内做透明度变化（实现快速过渡）。

示例配置 #

假设我们设定：

• 总动画周期时长：10s（一轮轮播的总时间）
• 单方向淡入/淡出过渡时间：0.5s（比如从显示到完全透明的时间）

先计算各阶段的百分比占比：

• 过渡时间占总时长比例：0.5 / 10 * 100% = 5%
• 每张图静态显示时长占比：(10 - 0.5*2) / 3 /10 *100% ≈ 30%（减去两次过渡时间后，平均分配给三张图的静态显示）

修改后的代码如下：

/* 先将所有轮播项的动画总时长改为10s */
.slide1 {
  animation:fade 10s infinite;
  -webkit-animation:fade 10s infinite;
} 
.slide2 {
  animation:fade2 10s infinite;
  -webkit-animation:fade2 10s infinite;
}
.slide3 {
  animation:fade3 10s infinite;
  -webkit-animation:fade3 10s infinite;
}

/* 调整fade动画的关键帧节点 */
@keyframes fade
{
  0%   {opacity:1}
  /* 前30%时间保持完全显示，之后用5%时间淡出到透明 */
  30%  {opacity:1}
  35%  {opacity:0}
  /* 保持透明直到最后5%时间，再淡回显示状态 */
  95%  {opacity:0}
  100% {opacity:1}
}
@keyframes fade2
{
  0%   {opacity:0}
  /* 等待前35%时间，用5%时间淡入到显示 */
  35%  {opacity:0}
  40%  {opacity:1}
  /* 保持显示到65%时间，再用5%时间淡出 */
  65%  {opacity:1}
  70%  {opacity:0}
  100% {opacity:0}
}
@keyframes fade3
{
  0%   {opacity:0}
  /* 等待前70%时间，用5%时间淡入到显示 */
  70%  {opacity:0}
  75%  {opacity:1}
  /* 保持显示到95%时间，再用5%时间淡出 */
  95%  {opacity:1}
  100% {opacity:0}
}

自定义调整方法 #

你可以根据需求自由修改数值：

1. 确定总动画时长（比如12s）和过渡时间（比如0.3s）
2. 计算过渡时间占比：过渡时间 / 总时长 * 100%（比如0.3/12*100%=2.5%）
3. 计算静态显示占比：(总时长 - 2*过渡时间)/3 /总时长 *100%（减去两次过渡时间，平均分给三张图）
4. 根据计算出的百分比，调整@keyframes中的节点位置即可。

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