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; } }