CSS Animation and Display None

animate.css, css, css-transitions

Solution

CSS (or jQuery, for that matter) can't animate between `display: none;` and `display: block;`. Worse yet: it can't animate between `height: 0` and `height: auto`. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

Problem

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page. When I attempt this at first div that slides in still takes up space even when it is not visible. If I change the div to `display:none` the div doesn't slide in at all. How do I have a div not take up space until it is timed to come in (using CSS for the timing.) I am using Animate.css for the animations. Here is what the code looks like: ``` <div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> <div id="div1"><!-- Content --></div> <div id="div2"><!-- Content --></div> <div id="div3"><!-- Content --></div> ``` As the code shows I would like the main div to be hidden and the other divs show at first. Then I have the following delay set: ``` #main-div{ -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } ``` It is at that point that I would like the main div to push the other divs down as it comes in. How do I do this? Note: I have considered using jQuery to do this, however I prefer using strictly CSS as it is smoother and the timing is a bit better controlled. EDIT I have attempted what Duopixel suggested but either I mis-understood and am not doing this correctly or it doesn't work. Here is the code: HTML ``` <div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> ``` CSS ``` #main-image{ height: 0; overflow: hidden; -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; } #main-image.fadeInDownBig{ height: 375px; } ```

Original source