4

我试图在使用 CSS3 几秒钟后隐藏一个 DIV。到目前为止，我有一些 7 秒后隐藏 div 的 jQuery 代码。是否可以在 CSS 中做到这一点？

jsFiddle

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-duration、animation-iteration-count、animation-delay和animation-fill-mode

对于每种样式，您还需要-webkit-, -moz-, -o-, and 以保持一致性-ms-（尽管我相信 IE10 可以在没有供应商前缀的情况下工作）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陈述中

animation: bubbly 0.9s 7s 1 forwards;

还有关键帧

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

jsfiddle 示例（带有供应商前缀）

于 2012-12-17T19:42:17.960 回答