html - css动画时间问题

Question

我的整个代码如下所示:

.inner .css-img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: css-carousel-fade 10s linear infinite;
  -moz-animation: css-carousel-fade 10s linear infinite;
  -ms-animation: css-carousel-fade 10s linear infinite;
  animation: css-carousel-fade 10s linear infinite;
}

.inner .css-img:nth-child(2) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}

@keyframes css-carousel-fade {
  0%, 50%, 100% { opacity: 0; }
  10%, 50% { opacity: 1;}
}

现在正在发生的事情是，第一张图片和第二张图片之间的过渡正在创建中，只是它花费的时间太长，因此显示第一张图片并且从第二张图片返回到第一张图片花费的时间太长。

Answer 1

不透明度是动画。 % 告诉您整个动画的哪一部分处理该部分。因此，从 0 到 45，不透明度为 1，然后从 45 到 90 逐渐淡出，然后从 90 到 100 保持淡出，然后在动画重新开始时再次恢复到 1。