CSS Transitions
CSS Transitions are an excellent way to add some smoothing effects to your web page. While it's nice that we can change styles based on an element's state (with the pseudo selectors :hover
, :active
, etc.), it can sometimes be a bit jarring when the effect happens immediately upon hovering, or clicking, etc.
Enter CSS Transitions. Transitions allow us to slow down the time it takes to transition from one style to another. We can specify how long the transition should take, which properties should be affected by the slower transition, and what kind of transition timing style it should take.
Example
We'll just be working with a simple box in our HTML:
<div class="box"></div>
And add some basic styling to the box and change a few things when we're hovering on the box:
.box {
width: 300px;
height: 300px;
background-color: aquamarine;
margin: auto;
border: 1px solid #333;
box-shadow: 10px 10px 5px 0 #999;
border-radius: 10%;
}
.box:hover {
box-shadow: none;
border-radius: 0;
background-color: cyan;
}
With this box, the :hover
state is triggered the instant the mouse hovers on the box, and instantaneously applies the new hover styles:
But we want the transition from the regular state to the hover state to be a bit more fluid and smooth. Time for transitions!
Transition options
CSS 3 gives us a number of properties that help us create transition effects between an element's state. The four transition properties are:
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property
The CSS property called transition-property
allows us to pick and choose which of the CSS properties we want to transition smoothly. In the above example, we could decide to transition the background shadow to disappear slowly over perhaps 2 seconds, but make the color change immediately upon hovering.
With transition-property
, we simply write the name of each CSS property we want to transition with commas in between each name:
.box {
...
transition-property: box-shadow, border-radius, background-color;
}
However, in this instance we're simply re-writing all of the properties we added on our :hover
class. For these instances, CSS provides the transition-property: all
option.
If you're following along, you may notice that nothing seems to have changed! That's because we also need, by necessity, to include the transition-duration
property, otherwise it will still transition instantly.
transition-duration
This property simply tells the transition how long it should take to complete. This is what makes the magic work:
.box {
...
transition-property: all;
transition-duration: 1s;
}
Now we have a working transition! There are a few other options given to us that are worth mentioning before finishing up
transition-timing-function
The transition-timing-function
is a way to change the style of the transition from one state to the next. They're all pretty similar and mostly exist to add a small touch of design to the animated transitions. The best way to see the difference between all the options is to check out this site's example
We'll add transition-timing-function: ease-in-out
to our CSS:
.box {
...
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
On to the last transition property
transition-delay
This one simply tells the CSS how long to wait before even beginning the transition. This one is pretty straightforward, as you would simply add transition-delay: 0.1s
to your CSS if you wanted it to wait for a tenth of a second before ever executing the transition.
If you're going to use this property, we'd recommend keeping the delay pretty short. Otherwise it can make your site seem slower than it really is.
Shortcut transition
property
Like many other properties in CSS, there is a shortcut that allows us to define the transition-property
, transition-duration
, transition-timing-function
, and transition-delay
properties all together. It's called simply transition
, and goes in this order:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
The square brackets []
simply indicate that they are all optional; you don't actually type in square brackets. It is very common to see something like the following in a site's CSS:
transition: all 0.5s ease-in-out;
That's a TON easier than writing out each one individually! You can still put your separate transition-property
s in there instead of all
and it will still work.
Cross-browser compatibility
CSS transition
properties are still not used the exact same between different browsers. For this, there are the typical "vendor prefixes" that you should use when you decide to use a transition in your CSS:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
Conclusion
Here's the final code:
.box {
width: 300px;
height: 300px;
background-color: aquamarine;
margin: auto;
border: 1px solid #333;
box-shadow: 10px 10px 5px 0 #999;
border-radius: 10%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.box:hover {
box-shadow: none;
border-radius: 0;
background-color: cyan;
}
And the final result: