Home »
CSS
transitions Property using CSS
CSS | transitions Property: In this tutorial, we are going to learn about the transitions property using CSS with syntax, examples.
Submitted by Anjali Singh, on November 28, 2019
CSS | transitions Property
When the CSS property changes the rendered result is immediately updated and the affected elements instantly change their old property value to the new property value. This approach describes a way to specify transitions using CSS properties. These properties are used to change smoothly from the old state to the new state.
Basic Syntax:
Element {
transition: width 2s;
}
Below are the properties of the transition,
- transition-property
- transition-delay
- transition-duration
- transition-timing-function
Now we will one by one see all these properties,
1) transition-property
This property specifies the name of the CSS property to which the transition is applied.
If the value is none it means that no property will transition. The keyword all means that all properties are to be transitioned, is given.
Every transition property accepts a comma-separated list that allows multiple transitions to be defined, each acting on a different property. Here the individual transitions take their parameters from the same index in all the lists.
Property values for transition-property,
- none: none of the property will get the transition effects.
- all: all the properties will get the transition effects.
- initial: this value sets the property to its default initial value.
- inherit: this value inherits property from its parent element.
- property: this is a transition effect value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: green;
transition-property: width;
}
div:hover {
width: 100px;
}
</style>
</head>
<body>
<p>The transition property in CSS</p>
<div></div>
</body>
</html>
Output
In the above example, if we hover over the box it expands by 100px in width.
2) transition-delay
This CSS property specifies the amount of time that is needed to wait before the transition effect starts. Generally, the height starts transitioning immediately but the width waits for 1 second.
If the transition value is 0 then the transition will start as soon as the property is changed.
Property values for transition-delay,
- time: it is the amount of time to wait before the transition effect starts.
- initial: sets the property to its default initial value.
- inherit: inherits the property from the parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-delay property in CSS</p>
<div></div>
</body>
</html>
Output
In the above example, transition effect has a 1 second delay before starting when we hover over the green box.
3) transition-duration
This CSS property specifies how long the transition from the old value to the new value should take. By default the value is 0 second, meaning that the transition is immediate.
If the value is negative then it renders the declaration invalid.
Property values for transition-duration,
- time: amount on time transition effect takes to complete the transition.
- initial: sets the property to its default initial value.
- inherit: inherits its property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition-duration: 3s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-duration property in CSS</p>
<div></div>
</body>
</html>
Output
In the above example, the duration is 3s over which the transition must take place.
4) transition-timing-function
This CSS property specifies how the intermediate values used during a transition will be calculated. This property allows the transition to change speed with respect to the duration. These effects are also called easing functions.
Property values for transition-timing-function,
- ease: it defines transition effect with a slow start and then fast.
- linear: it defines transition effect with the same speed from start to end.
- ease-in: it defines transition effect with slow speed at the start.
- ease-out: it defines transition effect with slow speed at the end.
- ease-in-out: it defines transition effect with slow speed at the start and end both.
- step-start: it is equivalent to steps(1,start).
- step-end: it is equivalent to steps(1,end).
- cubic-bezier(): it is used to define your values from 0 to 1 in the function.
- initial: sets the property to its default initial value.
- inherit: inherits its property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 75px;
height: 75px;
background: green;
transition-duration: 3s;
transition-timing-function: linear;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Transition-timing-function property in CSS</p>
<div></div>
</body>
</html>
Output
In the above example, the linear transition-timing-function is applied.
CSS Tutorial & Examples »