在CSS中隐藏Div容器

Question

在CSS中隐藏Div容器

jqueryhtmlcss

4

我正在尝试使用CSS3在一定时间后隐藏一个DIV。目前我有一些jQuery代码，在7秒后隐藏div。是否可能在CSS中完成这个操作？ jsFiddle

- James

1

请在问题中发布您的代码。 - jrummell

3个回答

3

设置关键帧，指定其持续时间、开始前的延迟时间，并指示其保留最后一个值：

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

@keyframes fademe { 
    to { opacity: 0 } 
}

Pen: http://codepen.io/joe/pen/mkwxi

这个代码示例中没有包含任何必需的厂商前缀。如果你想直接运行，请考虑使用Prefix-free：http://leaverou.github.com/prefixfree/。

- Sampson

0

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

还需要-webkit-，-moz-，-o-，以及为了一致性，每个animation样式都需要-ms-（虽然我相信IE10可以在没有供应商前缀的情况下工作）

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示例（带有供应商前缀）

- MikeM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evan · Accepted Answer

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