A transition represents an animation from one style to another over a period of time.
To create a transition, you first need two sets of CSS properties: the initial style that the element will have at the beginning of the transition, and the end style that is the result of the transition. So, consider the simplest transition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transitions in CSS3</title>
</head>
<body>
<div></div>
</body>
</html>
So this is where the property background-color of the div element is being animated. When you hover over an element, it will change color from gray to red. And when the mouse pointer leaves the element space, the original color will be returned.
To specify a property as being animated, its name is passed to the transition-property
transition-property: background-color;
In general, you can animate many different properties, such as color, background-color, border-color. A complete list of CSS properties that can be animated can be found at www.w3.org/TR/css3-transitions/#animatable-properties
Next is setting the transition time in seconds using the transition-duration property :
transition-duration: 2s;
In addition to seconds, you can set values in milliseconds, for example, 500 milliseconds:
transition-duration: 500ms;
And finally, we need to define the initiator of the action and the final value of the background-color property to be animated. An initiator represents an action that results in a change from one style to another. In CSS, pseudo-classes can be used to trigger a transition. For example, here the style for the pseudo-class is used to create the transition :hover. That is, when you hover the mouse over the div element, the transition will fire.
In addition to the pseudo -class :hover, you can use other pseudo-classes, for example, :active(link when pressed) or :focus(get element focus).
You can also use JavaScript code to trigger the transition.
Property Set Animation
If necessary, we can animate several CSS properties at once. So, in the example above, change the styles as follows:
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
transition-property: background-color, width, height, border-color;
transition-duration: 2s;
}
div:hover{
background-color: red;
width: 120px;
height: 120px;
border-color: blue;
}
Here, four properties are animated at once. Moreover, the animation for all of them lasts 2 seconds, but we can set our own time for each property:
transition-property: background-color, width, height, border-color; transition-duration: 2s, 3s, 1s, 2s;
Just as a property transition-property lists the animated properties separated by commas, a property transition-duration lists the time periods separated by commas to animate these properties. Moreover, the comparison of time to a certain property goes by position, that is, the property width will be animated for 3 seconds.
Besides comma-separated listing of all animated properties, we can simply specify the all keyword :
transition-property: all; transition-duration: 2s;
Now all the necessary properties that change values in the style for the pseudo class will be animated :hover.
Animation features
The transition-timing-function property allows you to control the speed of the progress and the execution of the animation. That is, this property will be responsible for how and at what points in time the animation will accelerate or slow down.
This property can take one of the following functions as a value:
- linear : linear easing function, property changes uniformly over time
- ease : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change
- ease-in : ease function that only speeds up at the beginning
- ease-out : an ease function that only speeds up at the end of the animation
- ease-in-out : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change
- cubic-bezier : cubic bezier is used for animation
Let’s apply the function ease-in-out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transitions in CSS3</title>
</head>
<body>
<div></div>
</body>
</html>
To use cubic Bezier, a cubic-bezier number of values must be passed to the function:
transition-timing-function: cubic-bezier(.5, .6, .24, .18);
Transition delay
The transition-delay property allows you to define a delay before the transition is executed:
transition-delay: 500ms;
The time period is also specified in seconds (s) or milliseconds (ms).
Transition property
The transition property is a shorthand notation for the above properties. For example, the following property description:
transition-property: background-color; transition-duration: 3s; transition-timing-function: ease-in-out; transition-delay: 500ms;
It will be similar to the following entry:
transition: background-color 3s ease-in-out 500ms;