CSS Transitions
Jakob Jenkov |
CSS transitions enable you to animate the transition of a CSS property from one value to another. You specify a CSS transition using one of the transition CSS properties:
transition-propertytransition-durationtransition-timing-functiontransition-delaytransition
The transition property is a shorthand for the first four transition properties.
CSS Transition Example
Here is a CSS transition example:
<style>
#theButton{
background-color: #6666ff;
transition-property: background-color;
transition-duration: 2s;
}
#theButton:hover {
background-color: #ff0000;
}
</style>
<button id="theButton">Hover over me</button>
Here is a button with these styles applied:
Notice how the background color of the button slowly changes from blue to red when you hover the mouse over the button.
CSS Transitions Are Two-Way
If you look at the previous example you will see that the background color transition goes both ways. When the mouse enters the button area the background color slowly changes to red. When the mouse leaves the button the background color slowly changes back to blue.
The reason that this transition is two-way is that the example declared the transition as part of the buttons's
core styling (via a CSS rule that is always applied). If instead you have moved the transition CSS properties
to the #button1:hover section, then the transition would still be applied when the mouse enters
the button because that is what triggers the #button1:hover section. But the transition would
not be applied when the mouse leaves the button again. Here is how the CSS transition code would look:
<style>
#theButton{
background-color: #6666ff;
}
#theButton:hover {
background-color: #ff0000;
transition-property: background-color;
transition-duration: 2s;
}
</style>
<button id="theButton">Hover over me</button>
And here is a button with the above styles applied:
Notice how the background color transitions smoothly to red when the mouse hovers over the button, but when the mouse leaves the button the background color changes immediately back to blue. That is because when the mouse is not hovering over the button, no transition CSS properties target the button anymore, and thus no transitions are applied.
transition-property
The transition-property CSS property specifies which CSS property the transition is to be applied to.
Not all CSS properties can be transitioned. Mostly numeric properties (e.g. width and height)
and color properties can be transitioned. Here is a CSS transition-property example:
<style>
#theButton{
background-color: #6666ff;
transition-property: background-color;
}
</style>
Notice how the transition-property is set to background-color. That means, that every
time some CSS rule makes changes to the background-color CSS property, the transition is applied.
transition-duration
The transition-duration CSS property specifies how long time the transition should take.
Typically you will specify a duration in seconds (e.g. 2s or milliseconds (e.g. 250ms).
Here is a CSS transition-duration example:
<style>
#theButton{
background-color: #6666ff;
transition-property: background-color;
transition-duration: 2s ;
}
</style>
This example sets a 2 second duration for the background color transition.
transition-timing-function
The transition-timing CSS property specifies how the transition takes place. You can use one
of the following predefined timing functions:
lineareaseease-inease-outease-in-out
The default value is ease.
The timing function linear creates a transition that progresses linearly from start to end.
The transition speed is the same throughout the whole transition.
The ease and ease-in-out transition timing functions start with a slower transition
speed and then accelerates the transition speed. Towards the end of the transition the speed slows down again.
The ease accelerates and slows faster than the ease-in-out, but the basic principle
is the same.
The ease-in transition timing function starts the transition slowly and then accelerates the speed.
Once the max transition speed has been reached it keeps that speed until the end of the transition. There is no
slow down towards the end of the transition.
The ease-out transition timing function starts the transition at max speed and then slows down
towards the end of the transition.
Here are 5 buttons that change their width when you hover the mouse over them. Each button uses one of the above transition timing functions. Hover the mouse over the buttons to see how the transition timing functions work.
The cubiz-bezier transition timing function requires a deeper explanation. If you are not
familiar with cubic Bezier curves, I have explained them in my SVG path tutorial.
A cubic Bezier curve has two control points which control the slope of the curve. This diagram shows a cubic Bezier curve with two control points pulling in the curve.
When used as a timing function, the cubic Bezier curve stretches between the logical points 0,0 and 1,1 . The X and Y values of the curve have a different meaning when used as a transition timing function than when the curve is drawn.
The X value is the time into the transition. So when X is 0 that is at the beginning of the transition duration, and when X is 1 it is at the end of the transition duration.
The Y value is the value of the CSS property that is being transitioned. Thus, when Y is 0 the transitioned property value has its start value, and when Y is 1 the transitioned property has its end value. The closer the Y value is to 0, the closer the transitioned CSS property value will be to its start value. The closer the Y value is to 1, the closer the transitioned CSS property value will be to its end value.
Since time progresses linearly, the browser will also progress the X value linearly through the curve. As time progresses (and therefore X progresses), the browser will calculate the corresponding Y value on the curve for each X value. The resulting Y value determines how far the transitioned CSS property value is between its start and end values. This diagram takes the curve from above and adds timing information to it:
This diagram takes the curve from above with three lines added. The lines mark 25%, 50% and 75% of the duration of the transition. These lines make it a bit easier to imagine how the cubic Bezier transition timing function works. The corresponding Y value on the curve for each of these lines (where the curve crosses the line) tells how far the transitioned CSS property value is between its start and end value.
If you move linearly along the X axis you will see that the Y value increases faster in the beginning, then slows a bit down, and the increases faster again towards the end of the curve. This curve will thus create a transition that starts out faster, then slows down, and then speeds up again towards the end of the transition.
When you specify a cubic Bezier curve as a timing function you only specify the control points. The start point is always 0,0 and the end point is always 1,1. Here is a cubic Bezier transition timing function example:
<style>
#theButton{
width: 200px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.8);
}
</style>
This example declares a cubic Bezier curve with the two control points (0.9 , 0.1) and
(0.1 , 0.8).
Here are some cubic Bezier curves with corresponding CSS code, and a button which transitions its width according to each of the cubic Bezier curves. That should give you an idea of how the cubic Bezier curve timing function works.
<style>
#theButton{
width: 200px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);
}
#theButton:hover {
width: 300px;
}
</style>
<style>
#theButton{
width: 200px;
transition-property: width;
transition-duration: 2s;
transition-timing-function: cubic-bezier(0.5, 0.1, 0.5, 0.9);
}
#theButton:hover {
width: 300px;
}
</style>
transition-delay
The transition-delay CSS property sets a time period that the transition is delayed before the
transition starts. You typically set the time in seconds (e.g. 0.5s) or milliseconds
(e.g. 250ms). Here is a CSS transition-delay example:
<style>
#theButton{
width: 200px;
transition-property: width;
transition-duration: 2s;
transition-delay: 250ms;
}
#theButton:hover {
width: 300px;
}
</style>
This example sets the transition-delay to 250 milliseconds meaning the transition will start
after a delay of 250 milliseconds.
transition
The transition CSS property is a shorthand version of the transition-property,
transition-duration, transition-timing-function and transition-delay
CSS properties. The transition CSS property takes the values of these four CSS properties
separated by a space. Here is a CSS transition example:
<style>
#theButton{
width: 200px;
transition: width 2s ease 250ms;
}
#theButton:hover {
width: 300px;
}
</style>
This example defines a transition of the width CSS property, with a duration of 2 seconds,
using the transition timing function ease and with a delay of 250 milliseconds.
CSS Transition Triggers
As you may have figured out by now, no transition starts unless some event triggers that transition. Transitions are typically triggered by changes in the CSS properties applied to the HTML element the transition targets.
Changes in CSS property values can happen when the mouse hovers over an HTML element, when it leaves etc.
These events are called "transition triggers". You have already seen examples of the :hover trigger
earlier in this text.
You can also trigger changes in CSS property values via JavaScript. You can either set a new CSS property value directly on the HTML element, or set a new CSS class on it which contains the new CSS property value.
Here is how you set a CSS property on an HTML element via JavaScript:
document.getElementById("theButton").style["background-color"] = "#ff00ff";
And here is how you set a new CSS class name on an HTML element via JavaScript:
document.getElementById("theButton").className = "newClass";
Remember, you can put more CSS class names into the string. Just separate them by a space.
| Tweet | |
Jakob Jenkov | |
