Animated transitions with Media Queries
At least I didn’t know about it until now – maybe you all knew already and no-one told me – why the secrets?
I was thinking about CSS transitions and wondered if they would work within the media-queries in your stylesheet. So I tried it out and guess what. It worked!
Now in our responsive web designs we can also animate the layout changes when a user resizes the browser window, no more rezise, snap, resize, snap.
I tested in Chrome, Firefox 4, Safari 5 and Opera 11 – it worked in all but best in Chrome.
All we need to do is add the appropriate CSS to the elements which change width, height etc in each declaration of that property (anywhere the width & height change in the media-queries).
/* 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;
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!