Wednesday, July 6th, 2011

Animated transitions with Media Queries

I discovered something cool!  ( demo | video )

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;

I uploaded a demo and a video of it in action (just incase you’re unlucky enough to use a non supporting browser).

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!

5 Responses to “Animated transitions with Media Queries”

  1. Crazy, I literally thought of this about an hour ago. I was thinking about reducing border-radius at smaller resolutions, and realised I could animate it for a little extra polish.

    Would just be:

    -webkit-animation-property: -webkit-border-radius;
    -webkit-transition-duration: 1s;

  2. admin says:

    Hi Russell, yeap – that would work and be a nice detail!

    As Harry pointed out (my edit) I used the wrong width and height definitions for Firefox and Opera – but it worked as by not specifying an animation property it will animate all changes – so I guess specifying them will enable your to animate just the properties you want.

    I think it’s best used for subtle things like the border radius you mention.

    Though it could be interesting for more experimental things also like animating the background position on the body for example.

  3. Bobby says:

    I’ve been messing around with this as well lately and I’ve been frustrated with how chrome applies the transition on page load. Just so you know there’s a bug filed for it so maybe one day they’ll fix it!

    http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/bac9127eafc16464?fwc=1

    I don’t suppose anyone has come up with a way around this issue in chrome?

  4. Diego says:

    Animating a Responsive Web Design is pointless, if u asks me… the idea behind RWD is “one design to fit any device/screen”… people wont be resizing the browser … so the animation wont happen, in mobile devices maybe, when u rotate your phone, but animations for mobile phones are not a good idea yet, not for websites at least.

Leave a Reply