javascript - 怎么让图片交替闪烁

Question

我有两张图片，我想让它们交替闪烁。我使用 CSS 和 javascript 使单个图片闪烁，但未能使第二张图片开始显示在第一张图片的偏移处。有什么办法可以控制时间吗？

尝试过:第一张图片使用了下面的，第二张图片反转了不透明度。

.blinking{
    -webkit-animation: blink 1s infinite;
    -moz-animation: blink 1s infinite;    
    animation: blink 1s infinite;
}

@-webkit-keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}
}

@-moz-keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}

}

@keyframes blink{

    100%{ opacity:1;}
    0%{opacity:0;}

}

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>