css serial transition
-
07-12-2019 - |
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?
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)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow