1 つの div をフェードインしようとしています....7 秒後に別の div をフェードインします。私の人生では、なぜ機能しないのかわかりません。アニメーション自体 (フェードイン/フェードアウト アニメーション) は機能しますが、一定の秒数後にフェードインするには、「進行中」の div が必要です。これを正しく行う方法を知っている人はいますか?
.coming{
width:320px;
height:auto;
position:absolute;
top:0px;
left:0px;
margin-left:10px;
background:#FFF;
color:#000;
font-family: Sans-Serif;
font-size:24px;
border-radius: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 1px 1px 5px #222;
padding:2px 20px;
}
#people .coming{
-moz-animation: fadein 3s ease-in; /* Firefox */
-webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
-o-animation: fadein 3s ease-in; /* Opera */
animation: fadein 3s ease-in;
}
.going{
width:320px;
height:auto;
position:absolute;
top:120px;
left:0px;
margin-left:10px;
background:#FFF;
color:#000;
font-family: Sans-Serif;
font-size:24px;
border-radius: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
box-shadow: 1px 1px 5px #222;
padding:2px 20px;
}
#people .going{
animation-delay: 7s;
-moz-animation: fadein 3s ease-in; /* Firefox */
-webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
-o-animation: fadein 3s ease-in; /* Opera */
animation: fadein 3s ease-in;
}
ありがとうございました。フィドルはここにあります: