65

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 :

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

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.

5 Answers 5

91

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.

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
<div class="ele"></div>

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.

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
<div class="ele"></div>

Both examples use animation-fill-mode, which can hold an element's visual state after an animation ends.

4
  • 4
    For visibility, instead of using keyframes, I think you're better off using a transition with a delay. For example: greywyvern.com/?post=337 Jul 21, 2017 at 18:25
  • Note: don't forget to add animation-fill-mode: forwards property.
    – Sachin
    May 26, 2020 at 8:10
  • @Oka, what's the purpose of visibility if the opacity will disappear the element? Sep 8, 2020 at 12:42
  • Combine this approach with a negative margin (for example margin-top: -200px) then at 100% set margin-top to initial desired value. When the element is min-height: 200px then you will have a smooth delay without the need of using JS tricks that are always a bit painful.
    – Waelmas
    Oct 25, 2020 at 10:12
34

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

6
  • This was a pure and simple solution that was just what I needed. Thank you!
    – jord8on
    Nov 28, 2018 at 6:43
  • Question for you @Leo... Is there any way to make it so my div is compressed... as if it's not there and not taking up any px height on the screen, until the image fades in, then expand the area where the div is to display the content in the div (in my cas, an image)
    – jord8on
    Nov 28, 2018 at 6:46
  • if I understand well you can change the code with... div { width: 100px; height: 0px;... and... to { opacity: 1; height: 100px; }
    – Leo
    Nov 28, 2018 at 10:55
  • That worked brilliantly! Thanks for the tip! One last question. I love the fade in on the actual image in my div. What can I do to make it so when this compressed div is expanding to (e.g. height: 100px) to make it so it slowly expands (like the fade) to the full height?
    – jord8on
    Nov 28, 2018 at 20:22
  • did you see my last question about making the div slowly expand to display the previously opaque element to visible?
    – jord8on
    Nov 29, 2018 at 21:51
13

You can play with delay prop of animation, just set visibility:visible after a delay, demo:

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}
So, Where are you?

<div class="delayedShow">
  Hey, I'm here!
</div>

3

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!

2

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

2
  • I'll upvote if you can make the fiddle work the other direction for the CSS element: from non visible to visible
    – Ely
    Jun 15, 2015 at 23:04
  • visibility is the way to go for transitions, instead of opacity. works great. May 21, 2016 at 21:54

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.