All the Glory of CSS Transitions
Consider this post a crash course that is all about the CSS3 transition property. I will go over what it is, how it works and where, and its awesome capabilities. So, sit back, take a sip of your cocoa and enjoy this amazing journey that is the transition property!
What are CSS transitions?
Thanks to CSS3, we have the transition property. Basically, it is a property that smoothes out element style changes. For instance, if I have a button with a green background color and on hover I say its background color is to be orange then when I hover the background colors change instantly. With a transition property in place, the color change is now fading (or easing) from green to orange over a predetermined time period such as 3 seconds. Consider it a small animation that adds a literal transition rather than an instant and sharp change. Let’s call a transition an effect that is added to a style change.
What makes CSS transitions great is the fact that they do not require any programming whatsoever – no need for Flash or JavaScript. Yay! Of course, its biggest drawback will be browser support – which I will go over in a minute – but one of its biggest advantages is that a transition will work when Flash and JavaScript are disabled. On top of that, transition property is easy to implement if you know your way around CSS or not.
A quick note: I am not including demos in this post on purpose. I want you to open and edit and play with the code yourself.
How do they work?
First of all, because of browser support issues some browsers need prefixes in order for the property to work. I’ve included those for you in the snippets and will go over them again later.
Let’s start by taking a look at the code below. First, you are creating a small red square with a hover change which will manipulate this square’s width to 300px. Try this right now – what happens is that on hover the width changes very quickly to 300px and when you move the mouse off, it goes back.
.box {
width: 100px;
height: 100px;
background: red;
}
.box: hover {
width: 300px;
}
As you can see I will have my CSS as part of this HTML document. You should link to an external file but for the purpose of this tutorial I’ll keep things all in one place for ease and simplicity.
In the document, I want to add two things. The first is the navigation.
<body>
<div id="nav">
<ul>
<li><a href="#">Studio</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="logo">Elephant Times</div>
</div>
</body>
Now add “transition: width 2s;” to this div’s code as you see below. Open it in the browser and see what happens. It animated! Woot woot!
.box {
width: 100px;
height: 100px;
background: red;
transition:width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
.box: hover {
width: 300px;
}
There are actually three things you need in order for a transition to actually take place. Obviously, you will need to apply the transition property. You first need to define what will be changing, and the duration of this change. Without those two things there is no indication that something is to be effected and for how long. After all, if the duration of the width change is null – which will be assumed to be zero, by the way – then there is no actual duration and therefore no transition; it will just snap to its new style as it does without the transition property.
transition: [property] [duration];
The last and third thing that needs to happen is defining what the change will be. In the above example, the change is set to be a new width of 300px on hover. If the new width wasn’t specified there would be nothing to change into and therefore no transition.
Caution!
I need to point out something very important; you are adding the transition to the default element state so in this case it would have been box NOT box:hover. The reason for this is to prevent repetition if you wanted an effect to take place on :hover and on :focus. You only need to specify the transition property once. Additionally, this is simply the way it is.
Browser support and prefixes
Browser support for this property isn’t that bad but it isn’t that great either. Here is the rundown of browser support for transitions:
- Chrome 1.0
- Safari 3.2
- Firefox 4.0
- Internet Explorer 10
- Opera 10.5
As I have mentioned before, some of these browsers do require prefixes. I have included them in the previous code snippet but here is the breakdown for them once more:
- Firefox 4: -moz-
- Chrome and Safari: -webkit-
- Opera: -o-
Which CSS properties can be transitioned?
I love answering this question because so many properties can actually be transitioned – it’s awesome. You can check out the whole official list of properties that can be transitioned provided by W3C. Just at a glance, you can change borders, margins, widths, heights and even z-index. I must say that this is a very complete list and one thing I truly love about this property.
Pseudo-classes
:hover
A change of styles on hover is very common as it is mostly used to indicate that something is active such as a link or a button. In the previous example I’ve used a hover effect to change the div’s width. Using a transition to animate a hover change is nothing special and I’m sure you’ve seen it plenty of times yourself. It’s simply the most common and obvious change.
.box {
width: 100px;
height: 100px;
background: red;
transition:width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
.box: hover {
width:300px;
}
:focus
In addition to a hover effect, you can smooth out a change for when you focus on an input field. In the example below I am adding a transition to any input field which when focused on, its border will change colour. Nothing fancy but still fun.
input {
width: 200px;
height: 50px;
border: 1px solid gray;
transition: border 2s;
-moz-transition: border 2s; /* Firefox 4 */
-webkit-transition: border 2s; /* Safari and Chrome */
-o-transition: border 2s; /* Opera */
}
.box:hover {
border: 1px solid blue;
}
And a few more…
Yes, there are actually a few more pseudo-classes which can be affected by the transition property such as :active, :enabled, :disabled, and :checked just to name a few. I want you to be aware that having a transition on :first-child or something similar to this will not work; this is because :first-child is not a trigger of sorts like :hover is. Nothing can happen on :first-child as it is merely a selection of the first element. However, if you have :hover set on :first-child then a transition will take place.
Multiple Changes
Another ‘woot woot’ please, as you can have many changes happen at once with transitions; woot woot! Basically what you do is follow a pattern which is that you divide the different property changes and their durations with commas. That’s it. Take a look at the pattern below.
transition: [property] [duration], [property] [duration], [property] [duration] ... ;
Of course the rule still applies that you need to define the changes that need to happen otherwise they won’t happen. Take a look at the snippet below to see how to implement many changes at once.
.box {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, background 2s;
-moz-transition: width 2s, height 2s, background 2s; /* Firefox 4 */
-webkit-transition: width 2s, height 2s, background 2s; /* Safari and Chrome */
-o-transition: width 2s, height 2s, background 2s; /* Opera */
}
.box:hover {
width: 300px;
height: 50px;
background: black;
}
Pretty snazzy? I think so.
Transitions Using Media Queries
The last thing I want to show you is how to implement the transition property with media queries. There are two things that can happen; first you can set that the change can only happen if the screen size is less then 960px – like in the example. Or you can say that the screen change itself is the trigger – like in the second example. The reason you would use media queries with transitions is to specify what different change is to happen with different screen sizes or whether there should be no transition at all with certain screen sizes. For instance, I want to have a transition when I hop over the main navigation on a desktop sized screen. However, I don’t want those transitions occurring on a tablet or a phone.
In order to see those two snippets in action, you will need to resize your browser window manually so that it is smaller than 960px. With the first snippet, what this is going to do is allow you to have a hover transition only if the screen size is less than 960px. When the screen is greater than 960px, the box is there, you can hover over it but nothing happens.
.box {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
@media only screen and (max-width: 960px) {
.box: hover {
width: 50px;
}
}
With the second snippet in action, you are going to see the box resize smoothly by itself when you resize the browser. The box will resize when you make the browser window smaller and bigger.
.box {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
@media only screen and (max-width: 960px) {
.box {
width: 50px;
}
}
Conclusion
I hope you enjoyed learning about this awesome property; I also hope you will enjoy using it in your upcoming projects. Let me know what you think about the transition property and how you are using it in your designs.