web-dev-qa-db-ja.com

CSSアニメーションの遅延が機能しない

1つのdivをフェードインしようとしています...そして7秒後、別のdivをフェードインします。私の人生では、なぜそれが機能しないのか理解できません。アニメーション自体は機能しますが（フェードイン/フェードアウトアニメーション）、設定された秒数後にフェードインするために「going」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;

}

ありがとうございました。フィドルはここにあります：

http://jsfiddle.net/yZ4va/1/

csscss3css-animations
8
Ian Providence

.goingクラスには以下を使用してください。アニメーションプロパティのforwardsは、最後のキーフレームが実行された後、ブロックがopacity:0（非表示）に戻らないようにします。

#people .going{
    opacity: 0;
    -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in 7s forwards; /* Opera */
    animation: fadein 3s ease-in 7s forwards;
}

上記は、アニメーションの遅延を行うための省略形です。

フィドルデモ

16
Harry

問題は、順序とブラウザ固有の名前の欠落の両方にありました。

特定のプロパティは、より一般的な行の後に指定する必要があります。そうしないと、オーバーライドされます。

また、進行中のdivに最初のopacity: 0がありませんでした（表示され始めていました）

作業フィドル

それを指摘してくれた@ Harry＆@ VikasGhodkeに感謝してforwardsで更新

#people .going{
    -moz-animation: fadein 3s ease-in forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in forwards; /* Opera */
    animation: fadein 3s ease-in forwards;
    -moz-animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -o-animation-delay: 7s;
    animation-delay: 7s;
}

次のように短縮構文にアニメーションの遅延を含めることで、特定のスタイル全体が短縮設定の問題を上書きすることを回避できます。

フィドル

#people .going{
    -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in 7s forwards; /* Opera */
    animation: fadein 3s ease-in 7s forwards;
}
6
dc5

設定するとすぐに遅延に乗ってしまいます。アニメーションの後に遅延を指定してください。しかし、もう1つ問題が発生します。最初に表示され、遅延後に消えてから表示されますが、これは良くありません。練習..

これをチェックしてくださいフィドル

#people .going{
    -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;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

もう1つのオプションは、タイミングおよびタイミング機能を試すことです。

これをチェックしてくださいフィドル

.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{
    animation: fadein 10s ease-in-out;
    -moz-animation: fadein 10s ease-in-out; /* Firefox */
    -webkit-animation: fadein 10s ease-in-out; /* Safari and Chrome */
    -o-animation: fadein 10s ease-in-out; /* Opera */
}
1
Vikas Ghodke