This is part one of a two-part complete guide to transitions. Here’s where we’ll get you started with the CSS transition duration and CSS transition properties.
This tutorial will get you up and running quickly, and you’ll be able to add all kinds of transitions to your websites and apps. Then in part two, you’ll fine-tune your skills, and reach Jedi level.
So read on, my padowan…
What is a CSS Transition?
A CSS transition is the simplest way to create animations on your site. You can do some really cool stuff without a line of JavaScript, and they are really easy to learn.
Many moons ago, if web developers wanted to animate their websites, all they really had were gifs and marquee text. Now we have CSS transitions – and all is well with the world.
And what’s really awesome is, to get up and running you really only need to know about two properties – CSS transition-duration and CSS transition-property.
What is CSS Transition Duration?
transition-duration is the CSS property that controls how long the transition from one state to another should take. So if you want to change the background color of an element, transition-duration will make that change happen gradually, fading smoothly from one color to the other.
The default value for transition-duration is 0s – the element will just snap instantly from the first state to the second. So in a sense, transition-duration is the master transition property – without it, nothing works.
For example, imagine you want to create a “Submit” button and make it change color when someone hovers on it. You could do that like this:
First, create a button element…
<button>Submit</button>
Code language: HTML, XML (xml)Then sprinkle in some CSS…
button {
border: 3px solid #F4D06F;
border-radius: 10px;
width: 100px;
height: 50px;
font-family: sans-serif;
font-size: 20px;
background: #392f5a;
color: #F4D06F;
}
button:hover {
background: #F4D06F;
color: #392f5a;
}
Code language: CSS (css)And you get this basic hover effect:
We changed the background and color properties using the :hover selector, so when you hover on the button these properties are applied. But as expected, the change happens instantly. It’s a little jarring.
How to use CSS Transition Duration
Creating the transition only takes one line of code, added to the CSS for the button. Its syntax is quite simple:
transition-duration: 1s;
Code language: CSS (css)Which creates the following:
Much nicer!
You can make the transition take as long as you like, of course. You can use fractions of a second, like 0.5s, 0.1s, or milliseconds, e.g. 300ms, 500ms. So .25s and 250ms create the same result.
Try editing the pen, and setting some different values: 0.1s, 0.5s, 3s… which do you think works best?
CSS Transition-Duration Transitions everything!
One thing to be aware of – by default, transition-duration affects everything!
Let’s get nuts and add a load more properties to our button’s hover state in our example:
button:hover {
background: #F4D06F;
color: #392f5a;
width: 200px;
height: 100px;
font-size: 30px;
transform: rotate(360deg);
}
Code language: CSS (css)This will turn out like this:
No, no, no! That 1-second transition-duration applied to every property we changed. This is too much!
We need to be more precise about which properties we transition to. The best way to do this is to limit how many properties we change (in this example, that would mean putting fewer properties in the hover selector).
But what if you want to change some states instantly, and transition others gradually? Well, that’s where CSS transition-property comes in…
CSS Transition-Property
transition-property enables you to control which CSS properties will be animated when you set a transition-duration.
You just list the properties you want to transition, separated by commas. Here’s an example of the syntax:
transition-duration: 1s;
transition-property: background, color;
Code language: CSS (css)This will make the background and color transition in 1 second, but nothing else will be transitioned. That creates this result:
Notice how the width, height, and font-size change instantly. And we don’t see the rotation at all – since we rotated 360 degrees, we ended up where we started.
If you’re wondering exactly which properties you’re able to animate with CSS transition-property, Mozilla has a guide for that here.
Using different Transitions Durations
If you want to transition different properties at different speeds, you can do so. Take a look at this example:
transition-duration: 1s, 2s;
transition-property: background, color;
Code language: CSS (css)Here the 1s will apply to background, and the 2s will apply to color.
If you have more properties than durations, the browser will just repeat your duration values. So this:
transition-property: background, color, width, height;
transition-duration: 1s, 2s;
Code language: CSS (css)Is equivalent to the following:
transition-property: background, color, width, height;
transition-duration: 1s, 2s, 1s, 2s;
Code language: CSS (css)Combining transition-duration and transition-property
The above code, although functional, is not incredibly readable, and it’s hard to maintain.
For example, what if you didn’t want to transition width anymore?
You’d have to delete width from transition-property, remembering that it was the third item in the list, and then delete the third duration from the transition-duration list. That’s a lot of work!
A better way is to combine these into a single transition property:
transition: background 1s, color 2s, width 1s, height 2s;
Code language: CSS (css)This does exactly the same thing, but it’s much easier to read and maintain.
If you’re sure you’ve got all your state changes set up properly, you can use all with transition, to apply the duration to all properties:
transition: all 2s;
Code language: CSS (css)Examples of transition-duration
You can apply transitions to almost every CSS property, such as scale, transform (scale, rotate, translate, translate3d), color, position, zoom etc.
Here are a few examples where we can see how to apply its syntax:
Scale
We can increase or decrease the size of an element by using the CSS property transform. scale is one of the types of transformation that we can apply to any element.
Here’s an example:
Notice how we are scaling the button from 1 (default value) to 1.5 by using transform: scale(1.5) on the button:hover state.
We are also using in this case transition-property: transform; for better performance. But if you don’t bother too much about it you can use transition-property: all;.
The key parts in the CSS code are these:
The most important part of the code is this:
button {
transition-duration: 1s;
transition-property: transform;
}
button:hover {
transform: scale(1.5)
}
Code language: CSS (css)Rotate
In the same way, CSS transform allows us to transform the element by rotating it on the 2-dimensional plane.
The rotate property uses deg units. For example transform: rotate(45deg). We can use positive or negative values. So, 90deg will rotate the element clockwise and -90deg to the opposite direction.
Here’s a working example in where we’ll be rotating the button.
The most important part of the code is this:
button {
transition-duration: 1s;
transition-property: background, color;
}
button:hover {
transform: rotate(360deg);
}
Code language: CSS (css)You could even go further here and use the rotateY, rotateX, or rotateZ functions.
Translate
Translate, as its own name describes, provides us a way to translate or move the element on the two-dimensional plane.
For exmaple transform: translate(40px, 20px) would move our element 10px on the X / horizontal axis and 20px on the Y / vertical axis.
You can choose to only move the element on the X-axis or the Y-axis. In that case, you can use 0 for the other parameter. For example transform: translate(40px, 0) will only move the element 40px horizontally.
Negative values are also allowed.
Translate3d
This transform function works in the same way as translate but it allows us to move elements on the 3d plane.
We can now move elements on the X, Y, and Z axis, where Z is the coordinate that will give us a sense of depth.
You’ll understand this better with an example:
We’ve added the perspective function too to make this much more obvious:
button {
transition-duration: 1s;
transition-property: transform;
}
button:hover {
transform: perspective(500px) translate3d(40px, 20px, -800px)
}
Code language: CSS (css)Skew
The skew function provides us a way to deform or tilt the element in one or multiple directions.
Its syntax uses the deg unit in the same way we do with rotate. For example transform: skewX(-25deg); will skew the element on the X-axis:
button:hover {
transform: skew(-25deg)
}
Code language: CSS (css)The Next Step – Advanced CSS Transitions
So, CSS transition-duration and transition-property are the two key elements to get started with transitions – you can do a lot with these two, so great work on getting this far!
But you wouldn’t be reading a complete guide to CSS transitions if there wasn’t more to it!
In fact, that transition property actually combines two other CSS transition properties too – and you’ll master these in part 2: CSS transition-timing-function and transition-delay where we explain how to use the linear, ease, ease-in, ease-outandease-in-out` timing functions.
In the meantime, how about some inspiration – have you seen the transitions and animations that you can use in fullPage.js?
For example, how about the water effect? Or the drop effect? fullPage.js is an all-singing, all-dancing JS library that lets you make amazing full page sites, with tonnes of transitions you can use to move from page to page.
It’s also really easy to set up and use – so give it a try, see what you think!
