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>