width: auto to 0 = line-height transition: 1 to 0

dabblet.css

/* width: auto to 0 = line-height transition: 1 to 0 */
div {
	display:block;
	width: 100px;
	line-height: 0;
	color: transparent;
	background: #ff0;
    transition: all 1s ease-in-out;
}
 .animated {
	line-height: 1.5;
	color: black;
	background: gold;
}div:first-line {
	color: red;
	background-color: green;
}
div.animated:first-line {
clear:both;
float:right;
	color: green;
	background-color: red;}
div:first-letter {
float:right;
	color: green;
	background-color: red;
}
div.animated:first-letter {
float:left;font-size:2em;
padding:0.2em;
	color: red;
	background-color: green;
	text-shadow:0 -1px white}
section{
	display:block;
	transition: all 10s ease-in;
}

dabblet.html

<section>
<div id="Toggle">
There once was a box that wanted a transition 
</div><button 
onclick="this.previousSibling.className=this.previousSibling.className=='animated'?'':'animated'">
Click me</button></section>

settings.json

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