Question

我正在尝试使用CSS3在一定时间后隐藏DIV。到目前为止，我有一些jQuery代码，在7秒后隐藏div。是否可以在CSS中执行此操作？

Answer 1

    <!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>

Answer 2

设置关键帧，持续时间，启动前的延迟，并指示它保留其最后的值：

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

@keyframes fademe { 
    to { opacity: 0 } 
}

笔：http://codepen.io/joe/pen/mkwxi

此代码示例不包含任何必需的供应商前缀。要按原样运行，您应该考虑使用无前缀：http://leaverou.github.com/prefixfree/。

Answer 3

使用animation属性的组合，特别是animation-name，animation-duration，animation-iteration-count，animation-delay和animation-fill-mode

对于每个{{1}，您还需要-webkit-，-moz-，-o-以及一致性-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;

jsfiddle example（包含供应商前缀）

隐藏CSS中的Div容器

3 个答案: