3

私の現在のページはこれです…</p> 

<div id="wr-notice" class="success">
    <div class="wrapper inner message">Thank you!</div>
</div>

CSS …</p> 

#wr-notice {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    color:white;
    background:green;
}

#wr-noticeCSS3でこれを5秒後に「隠す」ことは可能ですか? そのため、ページが読み込ま#wr-noticeれると表示され、5 秒後に非表示にするかアニメーション化します。最良のシナリオは、その高さをアニメーション化して0、スライドアップのようなものにすることですか?

その「タイマー」は CSS3 トランジションでも可能ですか?

そのことについて何か考えはありますか？

4

2 に答える 2

3

これは、純粋な css ソリューションを使用したフィドルです。

Firefox で試してみましたが、Chrome ではビューポートから何かを移動するときに問題が発生します。背景は再描画されないため、テキストが移動している間、緑色の背景は静止しているように見えます。しかし、要素は実際には動いているので、誰かがハックを思いつかない限り、それで生きなければならないと思います. ビューポート内でオブジェクトを移動すると機能します。誰かがバグを報告する必要があるかもしれませんが、何でも構いません。

編集: 赤い背景とカーソル ポインターが奇妙に見えることはわかっていますが、Chrome のバグを紹介したかっただけです。そのどれもCSSにとって不可欠ではありません。

編集2：もっと知りたい場合は、「cssキーフレームアニメーション」などをグーグルで検索してください。

于 2012-08-29T13:26:55.513 に答える
2

CSS3 を使用すると、使用できるanimation-delay要素があります。サイトからの引用：

animation-delay プロパティは、アニメーションがいつ開始されるかを定義します。

.delay()Javascript を使用する場合: JQuery要素を使用できます。

$(document).ready(function() {
  $("#wr-notice").delay(5000).slideUp();
});
于 2012-08-29T12:26:34.920 に答える