Responsive Web Design Using CSS Transitions

Responsive web design using CSS transitions Tutorial

Responsive web design using CSS transitions have been around for a while now, but many designers do not implement this nifty little feature. Why? Well, most users don’t normally sit at their computers, resizing their web browsers a hundred times. Unless they are web designers or developers. But maybe they do…For other reasons I can’t think of at the moment.

Using CSS transitions is a great way to add some flavor to your responsive website. Elements such text and/or images, repositioning smoothly, when resizing the browser.

Therefore, this feature normally goes unnoticed. But thats ok, because it’s really easy to implement, and looks way better than having text or images reposition abruptly. I’ve implemented this on the large header text on this website (see the homepage)

Here’s how you can get it working on your website. In this case we are going to smoothly animate some text, which will resize when the browser reaches a certain break point.

First, apply this style to your text. And make sure to use the proper vendor prefixes. This will transition the text size, using an ease in and out animation.

.body { font-size:11em; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; }

Now, in your media queries, set the font to a different size. Depending on your design, this size will vary.

@media screen and (max-width:320px) { .body { font-size:8em; } }

Each time you set a different media query, and change the font size for the “.body” text, it will smoothly transition.

Try it out, or see it in action on the homepage of this website.