Css動畫隊列

Question

我有一個麻煩的任務。應該隱藏圖像，默認顯示按鈕。我想顯示圖像並隱藏按鈕，但是當一個動畫結束時，應該開始secound。過渡應該持續1秒鐘。如何做到這一點？

所有代碼： https://jsfiddle.net/169vuuk8/

HTML代碼：

<div class="showSingle" itemprop="1"> 
    <img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo"> 
    <button class="button">button </button> 
</div> 

Answer 1

看起來像你只需要爲第二動畫transition-delay CSS屬性：https://developer.mozilla.org/en/docs/Web/CSS/transition-delay

您可以使用JS transitionend事件，但這裏並不是真的需要：https://developer.mozilla.org/en/docs/Web/Events/transitionend

Answer 2

不確定您需要的是什麼，但在圖像下方第一秒會淡出，延遲時間爲2秒後會熄滅按鈕。

.showSingle img { 
 
    opacity: 0; 
 
    animation: fadeInImage 1s ease-out forwards; 
 
} 
 

 
.showSingle button { 
 
    opacity: 1; 
 
    animation: fadeOutButton 1s ease-out 2s forwards;} 
 

 
@keyframes fadeInImage { 
 
    to { 
 
    opacity: 1 
 
    } 
 
} 
 

 
@keyframes fadeOutButton { 
 
    to { 
 
    opacity: 0 
 
    } 
 
}

<div class="showSingle" itemprop="1"> 
 
    <img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo"> 
 
    <button class="button">button </button> 
 
</div>