CSS Animations Between Media Queries

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 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:

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.

Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...

The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...

Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools.
The MooTools JavaScript
The first step is to grab...

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!

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 .

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!

Continue this conversation via emailGet only replies to your comment, the best of the rest, as well as a daily recap of all comments on this post. No more than a few emails daily, which you can reply to/unsubscribe from directly from your inbox.