← tbwcf | Animated transitions with Media Queries

Resize your browser in Chrome, Opera or Firefox 4+ and the boxes will animate their transitions

EDIT:
In my haste I had used : -webkit-width & -webkit-height in my CSS for Firefox and Opera which is incorrect. However, it still worked:

… this is because you can literally just have a transition duration and it will transition everything (colour etc) automatically.

Thanks for pointing that out Harry!

.box {
	float: left;
	width: 20em; 
	height: 20em;
	margin-left: 1em; margin-right: 1em;
	background: #eee;
	/* webkit */
	-webkit-animation-property: -webkit-width;
	-webkit-animation-property: -webkit-height;
  	-webkit-transition-duration: 1s;
	/* firefox 4+ */
	-moz-animation-property: -webkit-width;
	-moz-animation-property: -webkit-height;
  	-moz-transition-duration: 1s; 
  	/* Opera */
	-o-animation-property: -webkit-width;
	-o-animation-property: -webkit-height;
  	-o-transition-duration: 1s;   	
  	}
  	
@media (min-width: 721px) and (max-width: 960px){ 

	.box {
		width: 10em;
		height: 10em;
		/* webkit */
		-webkit-animation-property: -webkit-width;
		-webkit-animation-property: -webkit-height;
  		-webkit-transition-duration: 1s;
		/* firefox */
		-moz-animation-property: -webkit-width;
		-moz-animation-property: -webkit-height;
  		-moz-transition-duration: 1s;    
  		/* Opera */
		-o-animation-property: -webkit-width;
		-o-animation-property: -webkit-height;
  		-o-transition-duration: 1s;    
  	}

}
@media (max-width: 720px){ 

	.box {
		width: 5em;
		height: 5em;
		/* webkit */
		-webkit-animation-property: -webkit-width;
		-webkit-animation-property: -webkit-height;
  		-webkit-transition-duration: 1s;
		/* firefox */
		-moz-animation-property: -webkit-width;
		-moz-animation-property: -webkit-height;
  		-moz-transition-duration: 1s;
  		/* Opera */
		-o-animation-property: -webkit-width;
		-o-animation-property: -webkit-height;
  		-o-transition-duration: 1s; 
  	}
  	
}