CSS3 = Awesome

The Basics

Transitions

Transforms

Animations

Filters

Examples

Cross Fading

Sliding

3D Flipping

Accordions

Notes

Legacy

Which Vendor Prefixes are needed?

Browser Support

Read More…

Techniques

Animating height to auto

Callbacks for transitions

Callbacks for animations

Blog

How to use CSS Variables

SASS is awesome!

Retina Image Replacement for the New iPad

Speed/framerate comparison between jQuery and CSS3 transitions

Comments

Tweet

How to animate height from 0 to auto using CSS Transitions

This is a really common thing to want to do, and when you know the trick it's really easy! The short version is, you can't animate from 0 to auto using transitions. You have to have a height at the end. However, all is not lost…

This is some content that could be any length. In fact, click on it to edit it in place.

Hover over the grey box.

So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.

Simplified CSS

.our_content {
/* Initially we don't want any height, and we want the contents to be hidden */
max-height: 0;
overflow: hidden;

/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.outside_box:hover .our_content {
/* On hover, set the max-height to something large. In this case there's an obvious limit. */
max-height: 200px;
}

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

The Basics

CSS3 Transitions

CSS3 Transforms

CSS3 Animations

CSS3 Filters

Examples of use

Cross Fading

Sliding

3D Flipping

Accordions

Notes

Legacy

Browser Support

What to read next

Blog

How to use CSS Variables

SASS is awesome!

Retina Image Replacement for the New iPad

Speed/framerate comparison between jQuery and CSS3 transitions

To make as easy as possible, I'm putting style and script tags in each section, just before the demo. This isn't recommended for production use!

Any suggestions/improvements/etc, contact me via my Gmail account (rich.bradshaw), or on Twitter (richbradshaw).

© Rich Bradshaw of Focal Strategy 2010 - 2012

avenue-origin