CSS3 Transitions

Previous Page Next Page

Understanding CSS3 Transitions

Usually, when a CSS property's value changes, the displayed result immediately updates. For instance, when you hover over a button, its background color typically changes instantly.

CSS3 introduces a new feature called transitions, enabling you to smoothly animate a property's change from its old value to its new value over a specified duration. Below is an example demonstrating how to animate the background-color of an HTML button on hover.

Example

Give it a try »

button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
/* Standard syntax */
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}

To trigger a transition, you need to specify at least two properties: transition-property and transition-duration (which must be greater than 0). Other transition properties are optional, as their default values allow transitions to occur.

To enable a transition, you must specify at least two things: the CSS property's name you want to transition using transition-property and the duration of the transition (greater than 0) using transition-duration. Other transition properties are optional, as their default values don't hinder transitions.

Note: It's important to note that not all CSS properties can undergo animation. Typically, properties accepting numerical, length, percentage, or color values are animatable.

Performing Multiple Transitions

Every transition property can handle multiple values, which should be separated by commas. This allows easy definition of multiple transitions at once with different settings.

Example

Give it a try »

button {
background: #fd7c2a;
border: 3px solid #dc5801;
/* For Safari 3.0+ */
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
/* Standard syntax */
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
background: #3cc16e;
border-color: #288049;
}

Transition Shorthand Property

Although there are numerous properties to consider when using transitions, it's possible to specify all transition properties in a single property to shorten the code.

The transition property acts as a shorthand for setting all individual transition properties (transition-property, transition-duration, transition-timing-function, and transition-delay) at once in the specified order.

Ensure you follow this order when assigning values to this property.

Example

Give it a try »

button {
background: #fd7c2a;
-webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
background: #3cc16e;
}

Note: If any value is missing or not specified, the default value for that property will be used. So, if transition-duration's value is missing, no transition will occur since its default value is 0.

CSS3 Transition Properties

The below table provides a quick summary of all the transition properties:

Property	Description
`transition`	A shorthand property for setting all the four individual transition properties in a single declaration.
`transition-delay`	Specifies when the transition will start.
`transition-duration`	Specifies the number of seconds or milliseconds a transition animation should take to complete.
`transition-property`	Specifies the names of the CSS properties to which a transition effect should be applied.
`transition-timing-function`	Specifies how the intermediate values of the CSS properties being affected by a transition will be calculated.

Previous Page Next Page