EJS logo

CSS transitions & media queries

Article illustration for CSS transitions & media queries

While coding up the site for our Insites Tour, I happened across an accidental feature: a smooth transition on growing / shrinking type and image sizes when I resized the browser window. This isn’t particularly groundbreaking and has probably been put into use by others, but as I personally haven’t seen it used elsewhere on the web, I thought it’d be good to make a note of this happy accident.

The basic premise is this: you use media queries to design responsive websites that adapt their layout according to browser width, and you constantly resize your browser to see how the site performs, but each time a query kicks in, there’s a harsh jump between the old styles and the new ones. Why not use some simple CSS transitions to smooth that jump by animating the resize?

A note about relative sizing

On recent sites that I’ve designed responsively, such as the one for Ampersand, I’ve employed a simple technique of shrinking the body type as the browser width decreases. Since the font size is declared in ems and thus everything is relative to the body, this has the result of cascading down to the other elements and shrinking them, too. It’s nice and simple and looks something like this:

body { 
    font:1em/1.5em 'Verdana', 'Arial', sans-serif; 
}
@media screen and (max-width:800px) { 
    body { 
        font-size:0.8em; 
    }
}
@media screen and (max-width:400px) { 
    body {
        font-size:0.7em; 
    }
}

In our example code above, the media queries kick in at 800px (reducing the type down to 0.8em) and at 400px (reducing the type even further to 0.7em). To see that in action, have a look at demo 1 and resize your browser window.

Adding the transitions

The code for initiating the transitions is extremely simple, and is only this long because of the vendor prefixes:

body { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

Once that code is added, you’ll see that the resizing happens smoothly (over 0.2 seconds) instead of jumping suddenly. For proof, check out demo 2. Mmmm… bendy.

Doing it for images

You can add a transition to virtually any element you want (although be aware of how resource-intensive this might be), and applying one to images results in an even more obvious effect as the image grows and shrinks. To try it out, I’ve added an img tag into my markup and amended the CSS as you’d expect:

body { 
    font:1em/1.5em 'Verdana', 'Arial', sans-serif; 
}
img { 
   width:400px; 
}
@media screen and (max-width:800px) { 
    body { 
        font-size:0.8em; 
    }
    img { 
        width:300px; 
    }
}
@media screen and (max-width:400px) { 
    body {
        font-size:0.7em; 
    }
    img { 
        width:200px; 
    }
}
body, img { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

You can see the final thing in action by visiting demo 3 and watching how both the type and image grow and shrink as you resize your browser window.

A word of caution

As with anything that relies on relatively new, still-in-flux technology, be sure to exercise caution if you decide to put this into practice. Browser support is not universal (and behaviour is still inconsistent, even when supported), and as I mentioned above, applying transitions to multiple elements can be a little resource-intensive. In fact, the only reason this works alright on the Insites website is because the whole thing is a very simple, type-driven page. I’d be wary of putting this into practice on larger sites with more elements to contend with.

File this under ‘UI effects that are essentially rather useless but add a nice little touch if anybody happens to notice them’.

Previous post

Authentic Jobs UK