Css3 slideup slide down?

You can't use display:none with transitions. It will cause the transition to just jump from one state to the other without animating it.

Up vote 0 down vote favorite share g+ share fb share tw.

. HideUp { transition: .5s; display:none; } . HideLeft { transition: .5s; display:none; } I want to add the class to an element and have it slide left and disappear.

Thanks! Css css3 css-transitions link|improve this question asked Sep 14 '11 at 15:02Harry624322 82% accept rate.

You can't use display:none with transitions. It will cause the transition to just jump from one state to the other without animating it. This fiddle uses top to move the element.

It animates. jsfiddle.net/R8zca/4/ This fiddle uses display:none. It doesn't animate.

jsfiddle.net/R8zca/5/ If you want to animate an element hiding you can use z-index, opacity, position or visibilty. Here's the list of animatable properties: w3.org/TR/css3-transitions/#animatable-p....

You may wanna check the following article which contains content sliding demos: Using CSS3 Transitions, Transforms and Animation.

You'll have to use multiple browser specific property (moz-transition, webkit-transition...) A good explanation of how to use them is there: developer.mozilla.org/en/CSS/CSS_transit... for your case that'll be something like . ShowUp { transition:height .5s; height:50px; overflow:hidden; } . ShowLeft { transition:width .5s; width:0px overflow:hidden; } .showUp.

HideUp { height:0px } .showLeft. HideLeft { width:50px } And toggling hideUp and hideLeft classes to do a transition.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.