Css3 Transitions Tutorial : Advanced
Now that you understand how transitions work, lets look at two other useful properties:
-
transition-delay -
transition-timing-function
The first one, transition-delay, allows us to define a delay before the transition starts.
Like transition-duration, we can specify time in seconds (s) or milliseconds (ms) and its default value is 0s.
Let’s take our last example, and add this property:
/*Default style (=intial state)*/
p
{
/* Only the text color and the dimensions of
paragraphs will be transitioned. */
transition-property: color, width, height;
/* The transitions will take 3 seconds. */
transition-duration: 3s;
/* We wait 1.5 seconds before
the transition starts */
transition-delay: 1500ms;
/* Some style for our paragraphs. */
width: 400px;
height: 200px;
color: #fff;
background-color: #a5a5a5;
border: 2px solid #000;
margin: auto;
text-align: center;
}More interestingly, the transition-timing-function defines the acceleration of a transition: should the transition’s speed be linear? Should the transition gradually increase in speed?
This property can be set with these following values:
linear
- The speed of transition is constant.
ease
- The transition starts slowly, reaches a constant speed, and then ends slowly. It’s the default value.
ease-in
- The speed of transition gradually increases over time.
ease-out
- The speed of transition gradually decreases over time.
ease-in-out
- The transition starts slowly, it accelerates, and ends slowly. In fact, it is the same thing as ease, except that the effect is stronger.
cubic-bezier(x,x,x,x)
- This is more difficult to use! This value is based on Bézier curve. "Simply" replace the x with values between 0 and 1.
![[Note]](../images/note.png) | Note |
|---|---|
I recommend this resource for cubic-bezier easing effects. With this tool, you can easily determine the best values for your needs. |
As often with CSS, we can merge all the properties we’ve seen in only one. This property is simply called… transition!
p
{
transition: property duration timing-function delay;
}If we want to have several transitioned properties, we have to separate them with comas.
p
{
/* We can specify different values for each property */
transition: color 3s ease 1500ms, width 1s ease-in 0s, height 2s ease-out 0.2s;
}
