CSS Auto hide elements after 5 seconds

Question

Is it possible to hide element 5 seconds after the page load  I know there is a jQuery solution   I want to do exactly same thing  but hoping to get the same result with CSS transition   Any innovative idea  Or am I asking beyond the limit of css transition animation

User · Answer

based from the answer of  SW4  you could also add a little animation at the end    x000D   x000D  body  gt  div  x000D      border 1px solid grey  x000D    x000D  html  body   container   x000D      height 100   x000D      width 100   x000D      margin 0  x000D      padding 0  x000D    x000D   container   x000D      overflow hidden  x000D      position relative  x000D    x000D   hideMe   x000D      -webkit-animation  cssAnimation 5s forwards   x000D      animation  cssAnimation 5s forwards  x000D    x000D   keyframes cssAnimation   x000D      0     opacity  1   x000D      90    opacity  1   x000D      100   opacity  0   x000D    x000D   -webkit-keyframes cssAnimation   x000D      0     opacity  1   x000D      90    opacity  1   x000D      100   opacity  0   x000D    x000D   lt div gt  x000D   lt div id  container  gt  x000D       lt div id  hideMe  gt Wait for it    lt  div gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Making the remaining 0 5 seconds to animate the opacity attribute  Just make sure to do the math if you re changing the length  in this case  90  of 5 seconds leaves us 0 5 seconds to animate the opacity

User · Answer

Of course you can  just use setTimeout to change a class or something to trigger the transition   HTML    lt p id  aap  gt OHAI  lt  p gt    CSS   p       opacity 1      transition opacity 500ms    p waa       opacity 0      JS to run on load or DOMContentReady   setTimeout function        document getElementById  aap   className    waa      5000     Example fiddle here

User · Answer

YES   But you can t do it in the way you may immediately think  because you cant animate or create a transition around the properties you d otherwise rely on  e g  display  or changing dimensions and setting to overflow hidden  in order to correctly hide the element and prevent it from taking up visible space   Therefore  create an animation for the elements in question  and simply toggle visibility hidden  after 5 seconds  whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow   FIDDLE  CSS  html  body       height 100       width 100       margin 0      padding 0     hideMe       -moz-animation  cssAnimation 0s ease-in 5s forwards         Firefox        -webkit-animation  cssAnimation 0s ease-in 5s forwards         Safari and Chrome        -o-animation  cssAnimation 0s ease-in 5s forwards         Opera        animation  cssAnimation 0s ease-in 5s forwards      -webkit-animation-fill-mode  forwards      animation-fill-mode  forwards     keyframes cssAnimation       to           width 0          height 0          overflow hidden           -webkit-keyframes cssAnimation       to           width 0          height 0          visibility hidden            HTML   lt div id  hideMe  gt Wait for it    lt  div gt

User · Answer

Why not try fadeOut     x000D   x000D    document  ready function     x000D        plsme   fadeOut 5000      5 seconds x 1000 milisec   5000 milisec x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt div id  plsme  gt Loading    Please Wait lt  div gt  x000D   x000D   x000D    fadeOut  Javascript Pure    How to make fadeOut effect with pure JavaScript

[css] CSS Auto hide elements after 5 seconds

Examples related to css

Examples related to animation

Examples related to transition