Cssアニメーションキュー

Question

私は面倒な作業があります。画像は非表示にし、デフォルトでボタンを表示する必要があります。画像を表示してボタンを非表示にしたいが、アニメーションが終了すると、セカンドが始まるはずです。遷移は1秒間になるはずです。それを作る方法？

すべてのコード： https://jsfiddle.net/169vuuk8/

HTMLコード：ちょうど秒のアニメーションのためのtransition-delay CSSのプロパティを必要とするよう

<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

が見える：https://developer.mozilla.org/en/docs/Web/CSS/transition-delay

あなたはJSでtransitionendイベントを使用できますが、ここには本当に必要ではありません：https://developer.mozilla.org/en/docs/Web/Events/transitionend

Answer 2

あなたが正確に必要とするものは確かではありませんが、画像の下は1秒で消え、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>