CSS transition Property
How to use the CSS transition shorthand property which allows to specify the transition between two states of an element. See functions and try examples.
The CSS transition property lets you animate the change of a property's value over time instead of having it switch instantly. When the value of an animatable property changes — for example because the user hovers an element or a class is toggled with JavaScript — transition makes the browser interpolate smoothly from the old value to the new one, giving you fade, slide, grow and color-shift effects with no JavaScript animation loop.
transition is a shorthand that sets four longhand properties at once:
- transition-property — which property to animate (e.g.
width,opacity,all). - transition-duration — how long the transition takes (e.g.
2s,300ms). - transition-timing-function — the pacing curve (e.g.
ease,linear,cubic-bezier(...)). - transition-delay — how long to wait before it starts.
The transition property is one of the CSS3 properties.
How the shorthand reads
A single transition is written as:
transition: <property> <duration> <timing-function> <delay>;Only transition-property and transition-duration actually matter to get a visible effect; the timing function defaults to ease and the delay to 0s.
/* animate width over 2 seconds, default easing, no delay */
transition: width 2s;
/* full form: animate transform over 300ms with a custom curve, after a 100ms wait */
transition: transform 300ms ease-in-out 100ms;The first time value the parser reads is always the duration; the second is the delay. So transition: opacity 1s 2s means duration 1s, delay 2s — not the other way around.
If you omit the duration it defaults to 0s, and a 0s transition is instant — the effect simply does not animate. Always give a duration.
Animating several properties
To transition more than one property, separate each set with a comma. Each property can have its own duration, timing function and delay:
.box {
transition: left 1s ease-in-out,
background-color 1s ease-out 1s;
}You can also use the keyword all to transition every animatable property that changes, though listing properties explicitly is usually cheaper and more predictable.
transition: all 0.3s ease;The value none is valid and disables transitions for the specified properties.
Triggering a transition
A transition does nothing on its own — it only runs when an animatable property changes between two states. Common triggers are:
- Pseudo-classes such as :hover, :focus or :active.
- Toggling a class with JavaScript (
element.classList.toggle('open')). - Inline style changes from script (
element.style.opacity = 0).
Define the transition on the element's base (resting) state, not on the :hover rule. That way the animation plays both when the state turns on and when it turns back off.
Vendor prefixes like -webkit-, -moz-, and -o- are legacy and generally not required for modern browsers.
| Initial Value | all 0s ease 0s |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.transition = "all 3s"; |
Syntax
Syntax of CSS transition Property
transition: transition-property | transition-duration | transition-timing-function | transition-delay | initial | inherit;Example of the transition property with the :active pseudo class:
Example of CSS transition Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 100px;
background: #8ebf42;
transition: width 2s;
}
div:active {
width: 600px;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<p>Click and hold to see the transition effect.</p>
<div></div>
</body>
</html>Example of the transition property with the :hover pseudo class:
Example of CSS transition Property with :hover pseudo class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #000;
font-size: 1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.element {
padding: 20px;
width: 50px;
height: 50px;
left: 0;
background-color: #8ebf42;
position: relative;
transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}
.example:hover .element {
left: 400px;
background-color: #1c87c9;
}
.element-2 {
transition: none;
}
</style>
</head>
<body>
<h2>Transition property example</h2>
<div class="example">
<p>Hover over the container to see the transition effect.</p>
<div class="element element-1"></div>
<p>No transition:</p>
<div class="element element-2"></div>
</div>
</body>
</html>Good to know
- Only animatable properties transition. Numeric and color properties (
width,opacity,color,transform) animate; properties likedisplayorfont-familyjump instantly. - Avoid
autovalues. A transition between a fixed value andheight: autowill not animate, because the browser cannot compute the in-between sizes. Usemax-heightortransform: scaleY()instead. - Performance.
transformandopacityare the cheapest properties to animate because they don't trigger layout or paint. Prefer them over animatingleft/toporwidth/heightwhen you can. - Transitions vs. animations. Use
transitionfor simple A-to-B state changes; reach for animation with@keyframeswhen you need looping, multiple steps, or motion that starts on its own.
Values
| Value | Description |
|---|---|
| transition-property | Specifies the names of the properties for the transition. |
| transition-duration | Specifies the duration of the transition animation. |
| transition-timing-function | Specifies the speed over time of an object being transitioned from one value to another. |
| transition-delay | Specifies the amount of time to wait before a transition effect is animated. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |