Quick Tip: Using CSS Transitions in Responsive Web Design

With responsive web design (RWD) when we resize the browser window our designs move haphazardly across the screen as it meets each breakpoint. Which is not a problem for the average user, most don’t normally sit at their computers resizing their web browsers in a hundred different ways. Wouldn’t it be better if our design gently and gracefully eased into position. Enter CSS transitions.

CSS transitions are a great way to add some flavor to your responsive website. Elements such text and/or images, repositioning smoothly, when resizing the browser. Although this feature may often go unnoticed, it’s really easy to implement, and looks far better than having text or images reposition abruptly.

Check out this demo.

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 breakpoint.

First, apply this style to your text. 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 .5s ease-in-out; 
   	-o-transition:all .5s ease-in-out; 
   	-moz-transition:all .5s ease-in-out; 
   	-webkit-transition:all .5s ease-in-out;
}

In the CSS above, we are telling the styles within the body to transition ALL. This means every style that changes in the media queries below, will transition. .5s is the length of time for the transition, and ease-in-out is the type of transition.

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:500px) {
body {
    	font-size:8em;
  	}
}

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

This will also apply to colors and opacity as well. The example below will transition the font color from Black to Red.

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

@media screen and (max-width:500px) {
body {
    	font-size:8em;
        color:#ff0000;
  }
}

View the demo, and check out the source code to see some more ways you can play around with CSS Transitions in RWD.

Do you have a ‘Quick Tip‘ you would like to share with our readers? If so, get in touch with us: here.

(1 Posts)

John Surdakowski, from AvexDesigns.com is a web designer and developer currently living in New York. He loves experimenting with new styles and techniques both in web and mobile. John has a Twitter account. He posts random things. Follow him @avexdesign.

Comments

  • awa

    You should add the unprefixed transition to the bottom so it overrides all experimental implementations

  • Mark Penrice

    Nice, but beautifully pointless at the same time. And it’s a shame this page itself doesn’t feature such stuff.

  • pax

    Pretty useless, responsive design is not for resizing windows, is for different screen sizes, you don’t resize a tablet or mobile phone browser window. Windows are most often full size in each client, there’s no point in resizing – other than testing responsive desings.

  • Thanks, This is very useful tutorial.

  • But you do resize a browser window in your pc/mac. The effect looks pretty nice in that scenario.

  • Shinekhuu D

    what about changing horizontal to vertical?

  • pax

    you have a point, though when one changes the tablet/phone position the focus on the page is already lost, so I’d say this is still a proof of concept trick than actually useful.

  • Shinekhuu D

    Also just note please, for example my mom’s eyes are pretty bad, and she increases website’s zoom to make it easier to read.
    Sorry for my English, hope you understand my idea.