CSS transition Property
The transition shorthand property allows you to define the transition between two states of an element.
Description & Usage
The transition property enables smooth micro-animations when an element changes CSS property states (e.g. on :hover or :focus).
Shorthand syntax combines transition-property, duration, timing-function, and delay into a single clean line.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Animation |
| Initial Value | all 0s ease 0s |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
transition: <property> <duration> <timing-function> <delay>;Property Values
| Value | Description |
|---|---|
| all 0.3s ease | Transitions all animatable CSS properties over 0.3s with ease curve. |
| transform 0.2s ease-in-out | Smoothly animates transform changes. |
Code Examples
Smooth Button Scale Effect
.btn {
transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover {
transform: scale(1.05);
}
Smoothly scales up button on hover.