CODEWITHSUNDEEP
jqueryhtmlcss
James
James

Reputation: 323

Hide Div Container in CSS

I am trying to hide a DIV after a certain amount of seconds using CSS3. So far I have some jQuery code that hides the div after 7 seconds. Is it possible to do this in CSS?

jsFiddle

Upvotes: 4

Views: 308

Answers (3)

Evan
Evan

Reputation: 138

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

Upvotes: 3

Sampson
Sampson

Reputation: 268344

Set your keyframe, its duration, its delay before starting, and instruct it to retain its last values:

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

@keyframes fademe { 
    to { opacity: 0 } 
}

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

This code example doesn't contain any required vendor prefixes. To run as-is, you should consider using Prefix-free: http://leaverou.github.com/prefixfree/.

Upvotes: 3

MikeM
MikeM

Reputation: 27405

Use a combination of the animation properties, specifically, animation-name, animation-duration, animation-iteration-count, animation-delay, and animation-fill-mode

You'll also need -webkit-, -moz-, -o-, and for consistency -ms- (though IE10 I believe works without vendor prefixes) for each animation style

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 */

Or summed up in one animation statement

animation: bubbly 0.9s 7s 1 forwards;

And the keyframe

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

jsfiddle example (with vendor prefixes)

Upvotes: 0

Related Questions