Ever resized your browser to see how a site reacts responsively and seen a block animate from one place to another? It is a nice effect isn’t it? So let’s take a look at how you could achieve this using transitions.
What are transitions?
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
- Specify the CSS property you want to add an effect to
- Specify the duration of the effect.
The transition property is a shorthand property used to represent up to four transition-related longhand properties:
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a <div> element on :hover:
div {
transition: background-color 0.5s ease;
background-color: black;
}
div:hover {
background-color: white;
}That div will take half a second when the mouse is over it to turn from black to white.
You can find out a lot more about transitions and how you can use them over on the Mozilla Developer Network or a quick google will give you a wealth of tutorials and info.
Let’s see it in action
Let’s get onto my intial target of this post, to show you how to animate a site layout.
So you have your standard site layout with the header that has a logo, search area and social icons (obviously this can be anything you want). Below that you have our articles area and a sidebar.
When the browser is shrunk or you want the layout to change at certain breakpoints using media queries. You want the search to jump down to sit above the sidebar. Then on further breakpoints you want the widths of the logo, social icons and search area to go full width and sit below each other, but not just snap you want them to animate nicely to give the user that “ahh that’s nice” feeling. EEAASSYYY!!!
The markup
<div class="page-wrap">
<header class="main-header group">
<div class="logo">
logo
</div>
<div class="search">
<label for="search">Search</label> <input type="search">
</div>
<div class="social-icons">
Social icons would be in this container
</div>
</header>
<div class="main-content">
<main class="main-content-articles">
<article>
<h2>Some Title</h2>
<p>Mauris in aliquet arcu, nec tristique lectus. Fusce ligula velit, venenatis ut est quis, imperdiet facilisis ante. Suspendisse potenti. Etiam at leo ut augue rutrum blandit. Nullam pretium bibendum nulla, a sagittis nisi tempor in. Vivamus eu nunc magna. Phasellus vel elit felis. Integer est diam, auctor a vestibulum id, interdum quis est. </p>
</article>
<article>
<h2>Another Title</h2>
<p>Mauris in aliquet arcu, nec tristique lectus. Fusce ligula velit, venenatis ut est quis, imperdiet facilisis ante. Suspendisse potenti. Etiam at leo ut augue rutrum blandit. Nullam pretium bibendum nulla, a sagittis nisi tempor in. Vivamus eu nunc magna. Phasellus vel elit felis. Integer est diam, auctor a vestibulum id, interdum quis est. </p>
</article>
</main>
<aside class="main-content-sidebar">
<div class="module">
<h3>Sidebar content</h3>
<p>In rutrum nulla vitae odio ultricies, pellentesque pellentesque nisl venenatis.</p>
</div>
</aside>
</div>
</div>This gives you some basic structure for all the different content areas we wanted.
The CSS
Let’s make it really garish just so we can clearly see each section.
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
.group:after {
display: block;
clear: both;
}
.page-wrap {
width: 80%;
background: white;
margin: 1rem auto;
padding: 2rem;
}
.main-header {
position: relative;
}
.logo {
width: 25%;
background: red;
padding: 0.5rem 1rem;
color: white;
font-size: 3rem;
float: left;
height: 80px;
}
.search {
width: 25%;
position: absolute;
left: 25%;
top: 0;
background: yellow;
height: 80px;
padding: 1rem;
}
.search label {
display: block;
}
.nav {
width: 50%;
float: right;
background: green;
height: 80px;
padding: 1rem;
}
.main-content {
overflow: hidden;
clear: both;
}
.main-content-articles {
width: 75%;
float: left;
background: #333;
padding: 1rem;
}
.main-content-articles article {
background: white;
padding: 1rem;
margin: 0 0 1rem 0;
}
.main-content-articles article:last-child {
margin: 0;
}
.main-content-sidebar {
width: 25%;
float: right;
background: #ccc;
padding: 1rem;
}
.module {
background: white;
padding: 1rem;
}That should be garish enough!
Transitions
Now let’s start adding some initial tranistion properties and after we will look at the breakpoints to make these transitions take effect.
Here is the full CSS for all the initial transitions:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
.group:after {
display: block;
clear: both;
}
.page-wrap {
width: 80%;
background: white;
margin: 1rem auto;
padding: 2rem;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.main-header {
position: relative;
}
.logo {
width: 25%;
background: red;
padding: 0.5rem 1rem;
color: white;
font-size: 3rem;
float: left;
height: 80px;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.search {
width: 25%;
position: absolute;
left: 25%;
top: 0;
background: yellow;
height: 80px;
padding: 1rem;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.search label {
display: block;
}
.social-icons {
width: 50%;
float: right;
background: green;
height: 80px;
padding: 1rem;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.main-content {
overflow: hidden;
clear: both;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.main-content-articles {
width: 75%;
float: left;
background: #333;
padding: 1rem;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.main-content-articles article {
background: white;
padding: 1rem;
margin: 0 0 1rem 0;
}
.main-content-articles article:last-child {
margin: 0;
}
.main-content-sidebar {
width: 25%;
float: right;
background: #ccc;
padding: 1rem;
}
.module {
background: white;
padding: 1rem;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}That puts all the transitions in place ready to take action when something changes on the selected areas.
Media Queries
Now it is time to put them breakpoints in place to make the transitions take effect.
Simply add this below your other styles:
@media (max-width: 850px) {
.page-wrap {
width: 98%;
}
}
@media (max-width: 700px) {
.search {
left: 66.66%;
top: 80px;
width: 33.33%;
}
.logo {
width: 33.33%;
}
.social-icons {
width: 66.66%;
}
.main-content-articles {
width: 66.66%;
}
.main-content-sidebar {
width: 33.33%;
padding-top: 80px;
}
.module {
margin-top: 1rem;
}
}
@media (max-width: 550px) {
.page-wrap {
padding: 1rem;
}
.logo {
width: 100%;
}
.social-icons {
width: 100%;
height: 50px;
}
.search {
left: 0;
width: 100%;
top: 130px;
height: 70px;
}
.main-content {
padding-top: 70px;
}
.main-content-articles {
width: 100%;
}
.main-content-sidebar {
padding-top: 0;
width: 100%;
}
}Then that is about it you can see the full effect in this demo. A nice little effect and just takes it beyond your usual way a site will change at breakpoints.
Transitions can be really powerful and you should go and experiment and have fun!