Transition to height:auto on replaced elements

dabblet.css

/**
 * Transition to height:auto on replaced elements
 * CSS brain teaser: If transitions to/from height:auto don’t work, why is the height transitioning here? 
                     And why is it not transitioning when it shrinks but only when it grows?
                     Scroll down for the solution.
 */

img {
	width: 0; height: 0;
	transition: 1s linear;
}

html:hover img {
	width: 200px; height: auto;
}










/*
	Solution:
	Non-animatable value changes happen immediately. So, on mouse over, height:auto is applied immediately and then
	because the width is animated, the height animates as well, because the image has an intrinsic aspect ratio.
	On mouse out, height:0 is applied immediately as well, so we don't see any transition for the width.
*/

dabblet.html

<p>Hover over here</p>
<img src="http://placekitten.com/400/300" />

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}