CSS3 equivalent to jQuery slideUp and slideDown?

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

I changed your solution, so that it works in all modern browsers:

css snippet:

-webkit-transition: height 1s ease-in-out;-moz-transition: height 1s ease-in-out;-ms-transition: height 1s ease-in-out;-o-transition: height 1s ease-in-out;transition: height 1s ease-in-out;

js snippet:

    var clone = $('#this').clone()                .css({'position':'absolute','visibility':'hidden','height':'auto'})                .addClass('slideClone')                .appendTo('body');    var newHeight = $(".slideClone").height();    $(".slideClone").remove();    $('#this').css('height',newHeight + 'px');

here's the full example http://jsfiddle.net/RHPQd/

So I've gone ahead and answered my own question :)

@True's answer regarded transforming an element to a specific height. The problem with this is I don't know the height of the element (it can fluctuate).

I found other solutions around which used max-height as the transition but this produced a very jerky animation for me.

My solution below works only in WebKit browsers.

Although not purely CSS, it involves transitioning the height, which is determined by some JS.

$('#click-me').click(function() {  var height = $("#this").height();  if (height > 0) {    $('#this').css('height', '0');  } else {    $("#this").css({      'position': 'absolute',      'visibility': 'hidden',      'height': 'auto'    });    var newHeight = $("#this").height();    $("#this").css({      'position': 'static',      'visibility': 'visible',      'height': '0'    });    $('#this').css('height', newHeight + 'px');  }});

#this {  width: 500px;  height: 0;  max-height: 9999px;  overflow: hidden;  background: #BBBBBB;  -webkit-transition: height 1s ease-in-out;}#click-me {  cursor: pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><p id="click-me">click me</p><div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div><div>always shows</div>