如何使圖片交替閃爍

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> 

Answer 2

簽出動畫延遲屬性。 當拳頭圖像處於中間閃爍狀態時，您可以安排延遲開始的時間。

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