3つ並んだ画像を順番にフェードインさせたいのですがうまくいきません。
.img01{
display:inline-block;
margin:10px;
-webkit-animation-name:anime;
-webkit-animation-duration:3s;
}
.img02{
display:inline-block;
margin:10px;
-webkit-animation-name:anime;
-webkit-animation-duration:3s;
-webkit-animation-delay:1s;
}
.img03{
display:inline-block;
margin:10px;
-webkit-animation-name:anime;
-webkit-animation-duration:3s;
-webkit-animation-delay:2s;
}
@keyframes anime{
0% {
opacity:0;
}
30%{
opacity:0;
}
100%{
opacity:1;
}
}
これをやると
.img02.img03が表示されたところから始まります。
.img02.img03にopacity:0;をつけると最初はうまくいくのですが、アニメーション終了時に消えてしまいます。
よくわからないので詳しい方、教えて下さい。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。