CSS 动画默认为缓慢淡入淡出，有没有办法改变它？

Question

CSS 动画的新手。创建了一个包含 8 张图片的动画，总动画持续时间为 100 秒。使用关键帧百分比，前 6 帧 10 秒，第 7 帧 30 秒，最后一帧 10 秒，使用背景图像 url 指定图片。当实现图片淡入和淡出时非常缓慢，在帧的 10 秒时间内勉强完成。我正在学习的 W3schools 网站没有提供任何选项来加速淡入淡出或指定不同类型的幻灯片过渡。我在网络上的其他任何地方都找不到这个问题的答案。我错过了什么吗？请参阅下面的代码：

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-image: url('images/pic1.png'); }
  10% { background-image: url('images/pic2.png'); }
  20% { background-image: url('images/pic3.png'); }
  30% { background-image: url('images/pic4.png'); }
  40% { background-image: url('images/pic5.png'); }
  50% { background-image: url('images/pic6.png'); }
  80% { background-image: url('images/pic7.png'); }
  90% { background-image: url('images/pic8.png'); }
}

<div class="homeslider"></div>

Answer 1

为了在网站上说明您的问题，我使用背景颜色而不是图片创建了一个片段：

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  10% { background-color: orange; }
  20% { background-color: yellow; }
  30% { background-color: green; }
  40% { background-color: blue; }
  50% { background-color: indigo; }
  80% { background-color: violet; }
  90% { background-color: purple; }
}

<div class="homeslider"></div>

在下面的示例中，我认为我通过在下一次更改的阈值之前添加额外的关键帧来解决您的问题，这样过渡直到最后一刻才发生：

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  9% { background-color: red; }
  10% { background-color: orange; }
  19% { background-color: orange; }
  20% { background-color: yellow; }
  29% { background-color: yellow; }
  30% { background-color: green; }
  39% { background-color: green; }
  40% { background-color: blue; }
  49% { background-color: blue; }
  50% { background-color: indigo; }
  79% { background-color: indigo; }
  80% { background-color: violet; }
  89% { background-color: violet; }
  90% { background-color: purple; }
  99% { background-color: purple; }
}

<div class="homeslider"></div>

Answer 2

background-image 是可动画的属性，因此您在整个序列中淡入和淡出图像 - 在任何时候图像 'stay still' 都不会完全不透明。

此代码段采用了一种相当简单的方法来最大程度地减少背景图像之间的过渡时间 - 在前几张图像中显示了将近 10% 的图像，然后非常快速地过渡到下一张图像。

此方法有一些缺点 - 系统不会期待在需要背景图像之前引入它们，因此第一次加载下一张图像时可能会有相当华丽的间隙。 [运行动画的 'fix' 一次，可能看不见，非常快速地提前加载图像已被删除，因为它似乎不是想要的。

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@keyframes homepics {
  0%,
  9.9999% {
    background-image: url(https://picsum.photos/id/1015/200/300);
  }
  10%,
  19.9999% {
    background-image: url(https://picsum.photos/id/1016/200/300);
  }
  20%,
  29.9999% {
    background-image: url(https://picsum.photos/id/1018/200/300);
  }
  30%,
  39.9999% {
    background-image: url(https://picsum.photos/id/1019/200/300);
  }
  40%,
  49.9999% {
    background-image: url(https://picsum.photos/id/1020/200/300);
  }
  50%,
  79.999% {
    background-image: url(https://picsum.photos/id/1021/200/300);
  }
  80%,
  89.999% {
    background-image: url(https://picsum.photos/id/1022/200/300);
  }
  90%,
  100% {
    background-image: url(https://picsum.photos/id/1023/200/300);
  }
}

<div class="homeslider"></div>

还有许多其他方法可以使用纯 HTML/CSS 来模拟图像滑块 - 例如将所有图像堆叠在一起并使用 'moving them' 和 z-index，或者播放不透明。

CSS 动画默认为缓慢淡入淡出，有没有办法改变它？

CSS animations default to slow fade in-out, is there a way to change that?

css

css-animations