如何使图片闪烁交替

Question

我有两张照片，我希望它们交替闪烁。我使用CSS和javascript来闪烁单个图片，但未能使第二张图片开始出现在第一张图片的偏移处。有没有办法控制时间？

试过：第一张图片使用了以下内容，第二张图片颠倒了不透明度。

N

Answer 1

尝试使用animation-delay

.blinking {
  animation: blink 1s infinite;
}

.delay {
  animation-delay: .5s;
}

@keyframes blink {
  0% {
    opacity: 1;
  }      
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="blinking">image 1</div>
<div class="blinking delay">image 2</div>

Answer 2

查看动画延迟属性。当第一张图像处于中间闪烁时，您可以将延迟计时开始。

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp