Adaptability is a cornerstone of modern web design, and whether you’re utilizing a pre-built framework or hand-crafting media queries, elements on your webpage will undoubtedly need to reposition or resize according to various screen sizes.
Media queries that react to browser window adjustments often make items snap into new configurations sharply. Introducing subtle transitions to these movements can significantly enhance the user experience on a responsive website.
In this article, I’ll provide a straightforward method for applying smooth transitions to your site’s width and opacity as it responds to media query changes.
Initial Setup
We’ll begin with a straightforward structure comprised of a main container div with three nested divs. As the browser window size shifts, so will these divs. The underlying HTML structure is as follows:
<div class='layout'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>
The core CSS will ensure that the three boxes are neatly contained within the main div, each separated by margins:
.layout {
width:960px;
height:600px;
background:#b34d6f;
margin:auto;
}
.box {
width:300px;
height:200px;
margin-right:25px;
background:#4d77b3;
display:inline-block;
margin-top:50px;
}
.box:last-child {
margin-right:0px;
}
This is our foundational style setup. Without media queries, the layout is static and won’t adjust as the browser resizes. Now, let’s integrate the media queries for responsiveness.
Implementing Media Queries
Media queries, crucial tools in responsive design, examine a device’s features (such as width, orientation, and resolution) and apply specific CSS rules when certain conditions match. In our case, we’ll use a couple of media queries to assess if the browser window is less than 960px or 660px, adjusting the width of the boxes and concealing the last one to make more room for the others:
@media screen and (max-width:960px) {
.layout {
width: 870px;
}
.box {
width:270px;
}
}
@media screen and (max-width: 660px) {
.layout {
width:570px;
}
.box {
width:170px;
}
.box:last-child {
opacity:0;
}
}
With these media queries in place, you’ll see our boxes resize and the third div fade as the browser window changes size. We use opacity rather than display property to hide the last div, allowing us to animate the transition—a feature not possible with the binary nature of the display attribute.
Animating the Transition
CSS animations serve beautifully for small tweaks that once depended on jQuery, enabling you to animate properties like color, width, and opacity gracefully.
To animate the entire webpage, we’ll utilize the universal selector ‘*’ and define our transition. While CSS animations degrade smoothly on unsupported browsers, including vendor prefixes will broaden compatibility:
*{
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
You can examine the completed example here.
Final Thoughts
Incorporating these understated animations adds a polished look-and-feel to any responsive website. With just a few extra lines of CSS, you can make a site that not only functions across devices but also transitions smoothly and elegantly.
Have you used animation in your media queries before? What kind of visual intrigue did you create? Share your experiences below.
Cover image/thumbnail, concept of adaptation via Shutterstock.
