O'Reilly

CSS Animations Between Media Queries

By on  

CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger? Let's have a look!

The CSS

The syntax for creating these animations and transitions is the same between media queries as it is between element states; the only difference is actually enacting them between the media queries:

/* base state */
#layout { 
	position: relative; 
	width: 900px; 
	border: 1px solid #ccc; 
	height: 200px; 
	
	/* animate width over a given duration */
	transition: width 2s;
}
.child {
	top: 0; 
	bottom: 0;
	width: 290px;
	position: absolute;
	opacity: 1;
	font-size: 20px;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	
	/* animate opacity, left, width over a given duration */
	transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
	#child1 { left: 0; background: lightblue; }
	#child2 { left: 300px; background: lightgreen; }
	#child3 { left: 600px; background: lightyellow; }

/* 
	When the client has 860 width or less:
	 	- animate the first two elements to be wider
		- fade out and hide the third element
		- animate the background colors
		- animate the font-size of the block
*/
@media screen and (max-width: 860px) {
	#layout { width: 600px; }
	.child { width: 290px; font-size: 12px; }
	#child1 { left: 0; background: blue; color: #fff; }
	#child2 { left: 300px; background: green; color: #fff; }
	#child3.child { /* hider */ opacity: 0; width: 0; }
}

The creativity is all in the developer's hands; animating media queries isn't difficult, but the use of them is more interesting. Some sites used to animate the position of structure elements during window resize, which is nice but how often is that a realistic usage? A more realistic usage is with mobile devices, animating elements when orientation changes:

/* base mobile styles */
#sidebar {
	transition: opacity 2s;
	width: 300px;
	overflow: hidden;
}

/* portrait */
@media screen and (orientation:portrait) { 
	/* portrait-specific styles */ 
	#sidebar {
		opacity: 0;
		width: 0;
	}
}

/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	#sidebar {
		opacity: 1;
	}
}

The animation above triggers when the device goes from portrait to landscape, and visa versa. This is incredibly useful when hiding a pane in portrait view and elegantly showing that pane when the user switches to landscape view.

CSS animations between media queries have traditionally been a delicacy of web design, but there are practical uses. The best part of them? There is no JavaScript involved and you can force CSS hardware acceleration if you'd like. Take a few moments to look at your mobile site to see if you can add this effect.

Track.js Error Reporting

Upcoming Events

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop....

  • CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

Discussion

  1. Great! This is something that I never tried before. It is new to me. Surely it would save my time and effort to build attractive website for my clients.

  2. Jesus

    YOU ARE A GENIUS. WHO WOULD THINK TO DO SOMETHING LIKE THIS?

  3. Instead of using -webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;, can’t we just use -webkit-transition:all 2s;, is it valid or not?

  4. Newbie Drewbie

    Nice post, Mr. Walsh.

    @RAM RATAN MAURYA Yes it is valid, http://www.w3.org/TR/css3-transitions/#transition-shorthand-property – I suspect it requires a bit more processing, but I have no data to back up my assumption.

  5. CSS is the best way to implement animation without any load of java script that can be more heavy and we can use it as media query,so it will definitely reduces the work load.

  6. Sara

    Wonderful! thank you for this! I always wondered how Chris Coyier’s “frog” transitioned as the screen resized (in his version 9 design), now I know how :)

  7. Dude, I have been using your code for years; You never fail to amaze me with what you do. Awesome. Also I’m really digging media queries for great responsive design.

  8. Thank you for the clever code. This will look superb integrated into our site. CSS is the future for providing attractive content to multiple client platforms.

  9. I think you’re ahead of the curve on this idea; a year or two from now I expect sites to be using this technique very heavily!

  10. Patrick

    This is a cool demo, but it should be noted it’s pretty expensive for FPS. Running in Chrome and using the timeline tool, the resize transitions looked to be between 15 and 25 FPS and was pretty jumpy. Not surprising given the reflows of changing the window, plus the paints and transitions on top, but I think it’s important to note .

  11. drew

    For performance reasons, I often do exactly the opposite: scope animation css such that transitions only apply to wider widths. Until we get media queries that let us key off of device cpu power, it’s sort of the best we can do, but it pays to be conservative with transitions on smaller devices where most users won’t even see a smooth transition, and unnecessary transitions can cause scroll choppiness. Some devices will even animate hovers on touch devices where the user’s finger blocks the entire effect! That’s not to say don’t ever do this, just be sure to budget your effects for the best experience in the space you have!

    • That’s a great idea — keeping scope on animations! I’d never thought of it but the benefits are likely huge!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....