CSS3 equivalent to jQuery slideUp and slideDown?

Question

My application is performing poorly with jQuery's slideDown and slideUp. I'm looking to use a CSS3 equivalent in browsers which support it.

Is it possible, using CSS3 transitions, to change an element from display: none; to display: block; while sliding the item down or up?

Answer 1

You could do something like this:

#youritem .fade.in {     animation-name: fadeIn; }  #youritem .fade.out {     animation-name: fadeOut; }  @keyframes fadeIn {     0% {         opacity: 0;         transform: translateY(startYposition);     }      100% {         opacity: 1;         transform: translateY(endYposition);     } }  @keyframes fadeOut {     0% {         opacity: 1;         transform: translateY(startYposition);     }      100% {         opacity: 0;         transform: translateY(endYposition);     } } 

Example - Slide and Fade:

This slides and animates the opacity - not based on height of the container, but on the top/coordinate. View example

Example - Auto-height/No Javascript: Here is a live sample, not needing height - dealing with automatic height and no javascript.
View example