CSS Animation and Display None

Question

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     lt div id  main-div  class  animated fadeInDownBig  gt  lt  -- Content -- gt  lt  div gt    lt div id  div1  gt  lt  -- Content -- gt  lt  div gt   lt div id  div2  gt  lt  -- Content -- gt  lt  div gt   lt div id  div3  gt  lt  -- Content -- gt  lt  div gt    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    lt div id  main-div  class  animated fadeInDownBig  gt  lt  -- Content -- gt  lt  div gt    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

User · Answer

You can manage to have a pure CSS implementation with max-height

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

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

You might have to also set padding, margin and border to 0, or simply padding-top, padding-bottom, margin-top and margin-bottom.

I updated the demo of Duopixel here : http://jsfiddle.net/qD5XX/231/

User · Answer

I had the same problem  because as soon as display  x  is in animation  it won t animate   I ended up in creating custom keyframes  first changing the display value then the other values  May give a better solution   Or  instead of using display  none  use position  absolute  visibility  hidden  It should work

User · Answer

How do I have a div not take up space until it is timed to come in  using CSS for the timing     Here is my solution to the same problem   Moreover I have an onclick on the last frame loading another slideshow  and it must not be clickable until the last frame is visible   Basically  my solution is to keep the div 1 pixel high using a scale 0 001   zooming it when I need it  If you don t like the zoom effect you can restore the opacity to 1 after zooming the slide    Slide TheEnd        -webkit-animation-delay  240s      animation-delay  240s       -moz-animation-timing-function  linear      -webkit-animation-timing-function  linear      animation-timing-function  linear       -moz-animation-duration  20s      -webkit-animation-duration  20s      animation-duration  20s       -moz-animation-name  Slide TheEnd      -webkit-animation-name  Slide TheEnd      animation-name  Slide TheEnd       -moz-animation-iteration-count  1      -webkit-animation-iteration-count  1      animation-iteration-count  1       -moz-animation-direction  normal      -webkit-animation-direction  normal      animation-direction  normal       -moz-animation-fill-mode  forwards      -webkit-animation-fill-mode  forwards      animation-fill-mode  forwards       transform  scale 0 001       background   cf0      text-align  center      font-size  10vh      opacity  0      -moz-keyframes Slide TheEnd       0    opacity  0   transform  scale 0 001         10    opacity  1  transform  scale 1         95    opacity  1  transform  scale 1         100    opacity  0   transform  scale 0 001         Other keyframes are removed for the sake of bytes  Please disregard the odd coding  it is made by a php script picking values from an array and str replacing a template  I m too lazy to retype everything for every proprietary prefix on a 100  divs slideshow

User · Answer

The following will get you to animate an element when   Giving it a Display - None Giving it a Display - Block   CSS   MyClass          opacity  0         display none         transition  opacity 0 5s linear         -webkit-transition  opacity 0 5s linear         -moz-transition  opacity 0 5s linear         -o-transition  opacity 0 5s linear         -ms-transition  opacity 0 5s linear       JavaScript  function GetThisHidden            MyClass   css  opacity    0   on  transitionend webkitTransitionEnd oTransitionEnd otransitionend   HideTheElementAfterAnimation      function GetThisDisplayed            MyClass   css  display    block   css  opacity    1   unbind  transitionend webkitTransitionEnd oTransitionEnd otransitionend       function HideTheElementAfterAnimation            MyClass   css  display    none

User · Answer

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

User · Answer

There are a few answers already  but here is my solution   I use opacity  0 and visibility  hidden  To make sure that visibility is set before the animation  we have to set the right delays   I use http   lesshat com to simplify the demo  for use without this just add the browser prefixes    e g  -webkit-transition-duration  0  200ms     fadeInOut        transition-duration 0  200ms        transition-property visibility  opacity        transition-delay 0         amp  hidden           visibility  hidden           opacity 0            transition-duration 200ms  0            transition-property opacity  visibility            transition-delay 0  200ms             So as soon as you add the class hidden to your element  it will fade out

User · Answer

When animating height  from 0 to auto   using transform  scaleY 0   is another useful approach to hide the element  instead of display  none     section     overflow  hidden    transition  transform 0 3s ease-out    height  auto    transform  scaleY 1     transform-origin  top      amp  hidden       transform  scaleY 0

[css] CSS Animation and Display None

Examples related to css

Examples related to css-transitions

Examples related to animate.css