Geek Answers Handbook

Hide Div container in CSS

I am trying to hide the DIV after a certain number of seconds using CSS3. So far, I have jQuery code that hides a div after 7 seconds. Can this be done in CSS?

jsFiddle

+4
source share
3 answers
<!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>
+3
source

Set the keyframe, its duration, the delay before starting and let it save the last values:

 #foo { animation: fademe 1s 7s forwards } @keyframes fademe { to { opacity: 0 } }

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

This sample code does not contain any required vendor prefixes. To run as-is, you should use without a prefix: http://leaverou.github.com/prefixfree/ .

+3
source

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

You will also need -webkit- , -moz- , -o- and for consistency -ms- (although 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 summarized in a single expression animation

 animation: bubbly 0.9s 7s 1 forwards;

And keyframe

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

jsfiddle example (with provider prefixes)

0
source

More articles:


All Articles