如何在 Pure CSS News Ticker 上设置动画延迟

Question

我有一个小的 Pure CSS 脚本，可以一张一张地淡出幻灯片。问题是，我无法将它设置为在每张幻灯片之间等待 10 秒。同样，它是纯 CSS，因此，没有 JS。

我尝试将 animation-delay 添加到第一张幻灯片，但它不起作用。

只需 1 秒在幻灯片之间替换。

如何设置延迟，让幻灯片 1 停留 10 秒，然后切换到幻灯片 2？

.slider {
  min-width: 560px;
  max-height: 250px;
  margin: 20px auto;
  position: relative;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide1 {
  background-size: cover;
  animation: fade 8s linear infinite;
  -webkit-animation: fade 8s linear infinite;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.slide2 {
  background-size: cover;
  animation: fade2 8s infinite;
  -webkit-animation: fade2 8s infinite;
}

.slide3 {
  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
  }
}

<div class='slider'>
  <div class='slide1'>test</div>
  <div class='slide2'>test2</div>
  <div class='slide3'>test3</div>
</div>

这是一个实时的：JSfiddle

Answer 1

处理 CSS 动画（以及一般编码）时最重要的是保持简单，这并不总是一件容易的事。

让我们稍微分解一下您的动画并展平您已有的和需要的。

time     —  0s    8s    10s    18s   20s   28s   30s   38s
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––----
slide1   -  0     1      0      0     0     0     0     1  ...
slide2   -  0     0      0      1     0     0     0     0  ...
slide3   -  0     0      0      0     0     1     0     0  ...

由此可见，所有的幻灯片实际上都会使用相同的动画关键帧。唯一的区别是第一个键何时启动 (t)。

time     -    t+0s    t+8s    t+10s   t+Total(otherAnimationsTime)
slide(n) -      0       1       0         start again

然后我们可以设置单个 @keyframes{} 块，并设置与所有动画的总持续时间相关的不同事件。

在您的例子中，每个元素 10 秒 x 3 = 30 秒的总动画时间。

在我们的 @keyframes 中，我们可以将我们的时间值转换为整个动画的百分比：

percentage = time_value / total_time * 100

0s => 0%;
8s => 8 / 30 * 100 = 26.6%
10s => 10 / 30 * 100 = 33.3%

那么我们所要做的就是为每个元素设置t第一帧延迟。

.slide1, .slide2, .slide3 {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  animation: fade 30s linear infinite;
}

.slide1 {
  animation-delay: 0s;
}

.slide2 {
  animation-delay: 10s;
}

.slide3 {
  animation-delay: 20s;
}

@keyframes fade {
  /* assumes a total duration of 3(0)s */
  0% { opacity: 0; } /* 0s */
  26.6% { opacity:1; } /* 8s */
  33.3% { opacity:0; } /* 10s */
}

<div class='slider'>
  <div class='slide1'>test</div>
  <div class='slide2'>test2</div>
  <div class='slide3'>test3</div>
</div>

如何在 Pure CSS News Ticker 上设置动画延迟

How to Set Animation Delay on Pure CSS News Ticker

html

css

delay

css-animations