CSS transition property allows you to animate changes in an element’s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries.
CSS transition property is a shorthand property for
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition-behavior (This property is on an experimental basis and may not be supported).
Possible Values
- <length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
Applies to
All elements, ::before and ::after pseudo-elements.
Syntax
transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;
The value for the transition property is defined as one of the following:
- The none value indicates that there will be no transitions on this element. This is the default value.
- Commas are used to separate one or more single-property transitions.
A single-property transition specifies the transition for one specific property or all properties. This includes:
- A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as:
- A <custom-ident> representing a single property.
- The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state
- If no value is specified, all value will be assumed, and the transition will apply to all changing properties.
- Specify zero or one <easing-function> value indicating the easing function to be used.
- Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay.
- If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword.
CSS transition – With Two Values
The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 2s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – delay Value
The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 2s .5s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – easing Function
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 15px;
transition: background-color 4s ease-in-out;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – easing Function and delay
The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 4s ease-in-out 0.7s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – behavior Value
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 10px;
transition: background-color 5s allow-discrete;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – Applied To Two Properties
The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s −
<html><head><style>
.box {
font-size: 14px;
width: 100px;
padding: 10px;
transition: color 2s, margin-left 4s;
background-color: lightskyblue;
}
.box:hover {
color: red;
margin-left: 70px;
}
</style></head><body><div class="box">Hover over me</div></body></html>CSS transition – Related Properties
Following is the list of CSS properties related to transition:
| property | value |
|---|---|
| transition-delay | Determines the amount of time to wait before starting a transition effect when a property’s value changes. |
| transition-duration | Determines amount of time that a transition animation should take to complete. |
| transition-property | Specifies which CSS properties should have a transition effect applied. |
| transition-timing-function | Determines which intermediate values are generated for CSS properties affected by a transition effect. |
Leave a Reply