In this lesson, we will look at how to make elements transition in different ways.
The transition property
CSS transitions make it possible to change property values smoothly, over a given duration of time.
There are a number of properties related to a transition, including:
In the following, we will have a look at each property.
The transition-property property specify the property that the transition is for:
Admittedly, this example could be created without the transition property attached to the .t1 selector. On its own, this property really doesn't do that much, but in the next couple of examples, we will see, how it can make a difference.
This property is used to define how much time the transition should take from 0-100% complete. By default, the value is set to 0s, meaning that the transition happens right away, but we can "slow down" the process:
As you can see, it now takes more time for the transition to complete (2s to be precise).
Other possible values include ms (miliseconds).
This property basically lets you set the acceleration curve of the transition.
Possible values include:
... as well as others. Let's have a look at some examples:
Admittedly, the difference is subtle, but it is there.
The transition property itself is used as a short cut for all the rest like this:
Let's have a look at an example:
NB: hover the element to see the result.
As you can see, the element above is set to have an initial width of 100px. When hovered, the width will change to 300px - this part has nothing to do with the transition. The transition, however, is what adds the smoothness to the change. The transition is added to the width property, making the change happen in 1s in a linear fashion, after 0.5s from hovering over the element.
We may also use the same property to make multiple change to an element, like this:
In the example above, we use the transition property to add a smooth transition to both the change in width and the change in color. Each property will change within 0.5 seconds.
Notice that we in this example don't define neither the transition-timing-function nor the transition-delay (even though we could), and that is totally fine.
We may of course also combine the transition property with the transform property that we looked at last time:
Read more references
Find out more about the transform property and see more examples of use at eg.: