css serial transition

Question

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

A div should grow from nothing to 100% from the bottom up then
text should fade in
then a timeout
then text should fade-out
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?

score 1 · Accepted Answer · answered Mar 05 '12 at 15:12

1

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)

answered Mar 05 '12 at 15:12

yunzen

32,854
11
73
106

I had hopes there was somesort of startrender command I could use inbetween or something that triggered the rendering. The Javascript I already tried that but couldn't get it to work (I'm not a java wiz) – Ton Mar 05 '12 at 15:17
Do you use any JavaScript Library as mootools, jquery, dojo, etc? – yunzen Mar 05 '12 at 15:58
Nope never could make a choice/had the time to go indepth. Using my Own library for 10 years now. – Ton May 08 '12 at 13:30
Yunzen, it seems if I want 'LibraryLess' your answer is the most helpfull. Thanks – Ton May 08 '12 at 13:32

css serial transition

1 Answers1