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