css3 slideup slide down

Question

How do I style an element with css transitions so that it would slide up / down / left / right when hidden?

.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!

Answer 1

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. http://jsfiddle.net/R8zca/4/

This fiddle uses display:none. It doesn't animate. http://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: http://www.w3.org/TR/css3-transitions/#animatable-properties-

Answer 2

You may wanna check the following article which contains content sliding demos:

Using CSS3 Transitions, Transforms and Animation