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;}
}

现在发生的事情是，图像1和图像2之间的过渡是创建工作，除非它花费的时间太长所以显示第一个图像，从第二个图像回到第一个图像需要很长时间。

Answer 1

不透明度是动画的内容。％告诉您整个动画的哪个部分处理该部分。因此，从0-45开始，你的不透明度为1，然后它从45-90逐渐消失，然后它从90-100逐渐消失，然后在动画重新开始时再次快速回到1。

css动画计时问题

1 个答案: