1

ここで少し問題があります。ページに背景画像があります。div をフェードインさせ、透明度を介して画像を「覆う」ようにします。最後以外は正常に動作します。透明度/不透明度の値は 0.8 で終了する必要がありますが、7 秒の遷移が完了すると、完全な不透明度に「ジャンプ」します (0.8 のままではありません)。CSSコードは次のとおりです。

@-webkit-keyframes fadein {
    from   { opacity: 0.5; }
    to { opacity: 0.8; }
}

@-moz-keyframes fadein {
    from   { opacity: 0.5; }
    to { opacity: 0.8; }
}

@keyframes fadein {
    from   { opacity: 0.5;}
    to { opacity: 0.8; }
}

 #contents {width:900px; height:600px; margin-left:40px; border:groove; background-color: #003; -webkit-animation: fadein 7s; -moz-animation: fadein 7s; animation: fadein 7s; }

...明らかにどこかにハンドブレーキがありません..何かアイデアはありますか? ありがとう

4

3 に答える 3

0

animation-fill-mode:forwardsアニメーション用に設定します。これにより、アニメーションが元の値に戻らず、終了値で停止することが保証されます。

于 2014-10-21T10:35:06.983 に答える
0

私はすでに答えがあることを知っていますが、私は仕事に飽きているので、ここに別の概念の jsfiddle があります: http://jsfiddle.net/7MFQX/2/

jqueryを使用すると、<div>CSSを介してすでに設定されている不透明度がフェードインします

$(document).on("click", ".btn", function() {
    $(".overlay").fadeToggle();    
});
于 2013-08-21T17:12:13.977 に答える