4

CSS3 を使用して、一定秒後に DIV を非表示にしようとしています。これまでのところ、7 秒後に div を非表示にする jQuery コードがいくつかあります。CSSでこれを行うことは可能ですか？

jsフィドル

4

3 に答える 3

3 
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 7s; /* IE 10+ */
    -moz-animation:myfirst 7s; /* Firefox */
    -webkit-animation:myfirst 7s; /* Safari and Chrome */
    -o-animation:myfirst 7s; /* Opera */
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards;  
    -o-animation-fill-mode: forwards;  
    animation-fill-mode: forwards;   
    }

    @keyframes myfirst
    {
    from {opacity: 1;}
    99%{opacity: 1;}
    to {opacity:0;}
    }

    @-moz-keyframes myfirst /* Firefox */
    {
    from {opacity: 1;}
    99%{opacity: 1;}
    to {opacity:0;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    from {opacity: 1;}
    99%{opacity: 1;}
    to {opacity:0;}
    }

    @-o-keyframes myfirst /* Opera */
    {
    from {opacity: 1;}
    99%{opacity: 1;}
    to {opacity:0;}
    }
    </style>
    </head>
    <body>

    <div>hello world</div>

    </body>
    </html>
于 2012-12-17T19:14:25.137 に答える
3

キーフレーム、その継続時間、開始前の遅延を設定し、最後の値を保持するように指示します。

#foo { 
    animation: fademe 1s 7s forwards
}

@keyframes fademe { 
    to { opacity: 0 } 
}

ペン: http://codepen.io/joe/pen/mkwxi

このコード例には、必要なベンダー プレフィックスが含まれていません。そのまま実行するには、プレフィックスなしの使用を検討する必要があります: http://leaverou.github.com/prefixfree/。

于 2012-12-17T19:23:27.493 に答える
0

アニメーションプロパティの組み合わせを使用します。具体的animation-nameには、、、、、およびanimation-durationanimation-iteration-countanimation-delayanimation-fill-mode

一貫性を保つために、各スタイル-webkit-に 、-moz-、 、およびも必要です(ただし、IE10 はベンダー プレフィックスなしで動作すると思います)。-o--ms-animation

animation-name:bubbly; /* name of keyframe animation (note @keyframe blocks need vendor prefixes also (atm) */
animation-duration:0.9s; /* how long the keyframe takes to run */
animation-iteration-count:1; /* how many times to run the keyframe */
animation-delay:7s; /* how long before the keyframe starts running */
animation-fill-mode:forwards; /* which styles to apply once the keyframe is done */

animationまたは、1つのステートメントに要約

animation: bubbly 0.9s 7s 1 forwards;

そしてキーフレーム

@keyframes bubbly {
  from {opacity:1;}
  to {opacity: 0;} 
}

jsfiddle の例(ベンダー接頭辞付き)

于 2012-12-17T19:42:17.960 に答える