Pure CSS animation visibility with delay

Question

I am trying to implement some animation onLoad without Javascript  JS is easy  CSS is     not   I have a div which should be on display  none  and should be display  block  after 3 secondes  Lots of resources told me animate does not work with display  but should with visibility  which I use often in my transition    Right know I have this terrible javascript function     lt script type  text javascript  gt        document  ready function                js only   hide            setTimeout function                      js only   show               3000            lt  script gt    I tried some animation in CSS but no result     nothing seems to work   I have few animation in my page  but just struggling with the display  none  on animation    -moz-keyframes showEffect       0    display  none  visibility  hidden        100    display  block  visibility  block         -webkit-keyframes showEffect       0    display  none  visibility  hidden        100    display  block  visibility  block         keyframes showEffect       0    display  none  visibility  hidden        100    display  block  visibility  block         css only       -moz-animation-name  showEffect      -moz-animation-iteration-count  1      -moz-animation-timing-function  ease-in      -moz-animation-duration  2 3s       -webkit-animation-name  showEffect      -webkit-animation-iteration-count  1      -webkit-animation-timing-function  ease-in      -webkit-animation-duration  2 3s       animation-name  showEffect      animation-iteration-count  1      animation-timing-function  ease-in      animation-duration  2 3s      It is important as hidden  this element does not take space at all  I created a JSFiddle to make quite tests   My main concerne is SEO     I don t think the JS option is really nice for that which is why I would like a pure CSS alternative  Also interested to test those animations and see where are those limits  Am I seeing one right now     Kinda having fun on such challenge   Thanks for reading  hope someone has an answer

User · Accepted Answer

You are correct in thinking that display is not animatable  It won t work  and you shouldn t bother including it in keyframe animations   visibility is technically animatable  but in a round about way  You need to hold the property for as long as needed  then snap to the new value  visibility doesn t tween between keyframes  it just steps harshly    x000D   x000D   ele   x000D    width  60px  x000D    height  60px  x000D     x000D    background-color   ff6699  x000D    animation  1s fadeIn  x000D    animation-fill-mode  forwards  x000D     x000D    visibility  hidden  x000D    x000D   x000D   ele hover   x000D    background-color   123  x000D    x000D   x000D   keyframes fadeIn   x000D    99    x000D      visibility  hidden  x000D      x000D    100    x000D      visibility  visible  x000D      x000D    x000D   lt div class  ele  gt  lt  div gt  x000D   x000D   x000D    If you want to fade  you use opacity  If you include a delay  you ll need visibility as well  to stop the user from interacting with the element while it s not visible    x000D   x000D   ele   x000D    width  60px  x000D    height  60px  x000D     x000D    background-color   ff6699  x000D    animation  1s fadeIn  x000D    animation-fill-mode  forwards  x000D     x000D    visibility  hidden  x000D    x000D   x000D   ele hover   x000D    background-color   123  x000D    x000D   x000D   keyframes fadeIn   x000D    0    x000D      opacity  0  x000D      x000D    100    x000D      visibility  visible  x000D      opacity  1  x000D      x000D    x000D   lt div class  ele  gt  lt  div gt  x000D   x000D   x000D    Both examples use animation-fill-mode  which can hold an element s visual state after an animation ends

User · Answer

Unfortunately you can t animate the display property  For a full list of what you can animate  try this CSS animation list by w3 Schools    If you want to retain it s visual position on the page  you should try animating either it s height  which will still affect the position of other elements   or opacity  how transparent it is   You could even try animating the z-index  which is the position on the z axis  depth   by putting an element over the top of it  and then rearranging what s on top  However  I d suggest using opacity  as it retains the vertical space where the element is    I ve updated the fiddle to show an example    Good luck

User · Answer

you can t animate every property    here s a reference to which are the animatable properties  visibility is animatable while display isn t     in your case you could also animate opacity or height depending of the kind of effect you want to render   fiddle with opacity animation

User · Answer

Use animation-delay   div       width  100px      height  100px      background  red      opacity  0       animation  fadeIn 3s      animation-delay  5s      animation-fill-mode  forwards      keyframes fadeIn       from   opacity  0        to   opacity  1        Fiddle

User · Answer

You can play with delay prop of animation  just set visibility visible after a delay  demo    x000D   x000D   keyframes delayedShow   x000D    to   x000D      visibility  visible  x000D      x000D    x000D   x000D   delayedShow  x000D    visibility  hidden  x000D    animation  0s linear 2 3s forwards delayedShow   x000D    x000D  So  Where are you  x000D   x000D   lt div class  delayedShow  gt  x000D    Hey  I m here  x000D   lt  div gt  x000D   x000D   x000D

[css] Pure CSS animation visibility with delay

Examples related to css

Examples related to css-animations