Search code examples
csscss-transitionsautogrow

css serial transition

Im browsing the net for more than a day now and still can't find a working solution to the followin problem.

  1. A div should grow from nothing to 100% from the bottom up then
  2. text should fade in
  3. then a timeout
  4. then text should fade-out
  5. then div should schrink towards the bottom of the div and vanish.
.max{
  max-height:100%;height:100%;color:#fff;
  -moz-transition-property:max-height,height, color;
  -moz-transition-duration:3s,3s,1s;
  -moz-transition-delay:0s,0s,2s;
 }
.min{
  max-height:0%;height:0%;color:transparent;
  -moz-transition-property:max-height,height, color;
  -moz-transition-duration:3s,3s,1s;
  -moz-transition-delay:1s,1s,0s;
 }

how can I serialize max & min into one CssClass If that's not possible how to do it in another way. But that doesn't fly. Anyone a nice idea or experience with this?

Solution

  • The transition can only work, if your start values and your end values differ.

    Because your start values and end values don't differ ('you come from nothing and you go to nothing' (Always look on the bright side of life)) it is not possible in one CSS class.

    What maybe possible is that you have two classes say appear and disappear and switch between them after a certain amount of time with javascript (setTimeout function)