Grow your CSS skills. Land your dream job.

Animated Media Queries

Published by Chris Coyier

If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn't remove the transition). If JavaScript literally changes the that style property, it will transition.

Likewise, if a new media query takes affect, and that media query has something in it that changes that property on that element, it will transition. As such, there really isn't a such thing as an "animated media query" so much as elements that just transition as expected when a new media query starts affecting the page.

Simple Example

.thing-that-moves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  transition: left 0.5s; /* BYO prefixes */
}
@media (min-width: 400px) {
  left: 50px;
}
@media (min-width: 600px) {
  left: 100px;
}

If you were to resize your browser window across those breakpoints, you'd see a red square moving around in response.

Slightly More Complex Layout Example

A few versions ago on CSS-Tricks, I had a search form that would slowly float into position using this exact technique. I've recreated that here in a somewhat simple layout, in which a few other things transition as well:

See the Pen Animated Media Queries by Chris Coyier (@chriscoyier) on CodePen

You might have the best luck checking it out in Full Page View.

Animated GIF of it working:

p.s. LICEcap is very useful for creating GIF's like that.

What else can I do?

They sky is the limit here. It's just CSS. Change and transition whatever you want. In another version of CSS-Tricks, I drew Mike the Frog from Treehouse out of simple CSS shapes. When different media queries hit, Mike would change shape, color, expression, and position - slowly morphing into the next state through transitions. It was well liked!

What is the browser support?

IE 9+ on the media queries. IE 10+ on the transitions. I wouldn't sweat the transitions as they are strictly funcandy only (if they don't transition, it doesn't matter, they still move). If you need deeper media query support, there is always Respond.js.

Is there any actual reason to do this?

Poops and giggles, yo. This is purely for fun. It can be a little touch just to give your site some spirit. It would be hard to make a business case, but if your performance budget doesn't have a few bytes for funzies, I feel bad for you son.

Anything to watch out for?

If the stylesheet is parsed fast enough and the transitions get applied to an element while the page is still being laid out, those transitions might be kinda obnoxious. You might want to apply them only after the page is loaded.

Comments

  1. Jack
    Permalink to comment#

    Thank You ! its look nice and usefull..

  2. Matthew
    Permalink to comment#

    I tried doing these a while back, I thought they were suuuuper cool. But, they’re just impractical, who really uses their browser in < 500px unless you’re testing media queries? So once it’s loaded on the page at the desired width, you don’t get effect. Still cool like.

    • Permalink to comment#

      Applying it to orientation change events gives a nice effect on mobiles I find.

    • Agreed, I don’t see who would ever see these apart from other developers looking to see if a website is responsive…

      I do quite like the point from Drazen though.

    • Joshua
      Permalink to comment#

      I think something like a lower than 600-700px query is always useful in case if someone wants to load the browser side-by-side with something else. But, depends on what your site is for after all :)

  3. Chris Ruppel
    Permalink to comment#

    Love this trick, and I’m glad to see the example is using a specific transition-property instead of all. The best MQ-based transitions are specific and controlled. Using all can result in more confusing (and much jankier) transitions, since many properties are transitioning simultaneously.

  4. Matthew
    Permalink to comment#

    RE: ^^ <– that post. – how would you make the browser load the stylesheet last?

    I think these would look cool if you could get the media queries to kick in after the ordinary page has loaded? Is this possible?

  5. Permalink to comment#

    Completely unproductive comment: I love that you used “Cow Farted” and “Cow Farted Again” as the headings, and “funcandy” as well. Good article, good words.

  6. Permalink to comment#

    Fun effect. Maybe slightly faster for the transitions http://codepen.io/grayghostvisuals/pen/jsite. Also wondering if translate would work as well seeing as the entire page and its parts have to be repainted every time the browser resizes (In that pen I used translate for the search box instead of left. feels willy wonka still and I think it needs the translateZ hack to be placed on its own layer and avoid painting).

    BTW This cow needs a heavy dose of Pepto. Here’s a god article for the cow to read on this matter http://drbenkim.com/articles-gas.html. Indigestion and gas are no laughing matter.

    • I quite like it when the different parts have different timings, so they all fall into place at different times.

  7. Permalink to comment#

    But why do I need transition effect in media queries? People open site in desktop, or tablet or in mobile, what’s the use of animation effect ? It will be useless in all places, only to see in desktop versions by dragging your browser. Am I wrong ? Thanks

    • Arturo Torres S├ínchez
      Permalink to comment#

      When you rotate your phone, the viewport width changes, and then you would see this animation.

    • You’re not wrong. See the section “Is there any actual reason to do this?” in the article above.

    • Mazurka
      Permalink to comment#

      Let’s take a user that is running windows 7 for example. They have your site pinned to the side (and it looks great still because it’s responsive) and another program pinned to the other side. Maybe they close that other application and full screen their browser and see a nice transition of elements growing, or moving or whatever it is. It’s not totally necessary for their experience but it’s nice (although I believe animation & interaction ‘in site’ are crucial for a successful, engaging experience).

  8. Nice trick here, I’ve the pleasure to use media queries transition every day! :)

  9. Ed
    Permalink to comment#

    I guess one potential business case could be that you’re signposting where an important element (in this case the search box) is moving to on the page. Particularly as we start to achieve complex layouts using CSS regions/flexbox etc. things start to look very different at different screen sizes and this could mitigate user confusion. Tenuous though.

  10. Nice eye-candy!

    I’m definitely going to code something like that in my next responsive project.

  11. Permalink to comment#

    My opinion is, that there is an easier way:

    * {  transition:all 1s ease; }
    

    screencast: here

  12. Just a little bit more specific,

    div { transition: all 0.5s linear}
    
  13. Ryan McKay
    Permalink to comment#

    This works wonderfully, looking forward to using it for phone orientation changing.

    Also to those that want to put a CSS transition on ALL elements I’d say that’s far too overkill and just introduces the feeling of a very slowed down visual experience.

    It’s useful on a few elements, but when every single thing has to spend half a second or more on a transition I feel that the UI would look like it’s in some sort of “slow-mo” effect.

  14. Permalink to comment#

    First comment, love your page, big fan, etc…
    I was thinking “what is it for?” for the whole article and at the end I saw “Poops and giggles, yo.” so I relieved, I’m not the only one who done things what don’t have real use. L’art pour l’art.

  15. Chris Poteet
    Permalink to comment#

    This doesn’t seem to work on flexbox properties however. I tried to do it on the change from flex-direction row to column on smaller viewports but no go.

  16. mgh
    Permalink to comment#

    interesting work!!!

  17. Gavin
    Permalink to comment#

    Yeah.. I am not sure who these are for? Does the average user resize the browser that much for it to need an effect like this?

    Or is this just for developers?

  18. Mike R
    Permalink to comment#

    I would add:

    .search input {
    width: 100%;
    }

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".