CSS Transitions

CSS Transitions allow you to change property values smoothly, over a given duration. It is commonly used for interactive elements like hover effects on buttons.

How Transitions Work

To create a transition, you must specify two things: 1) the CSS property you want to add an effect to, and 2) the duration of the effect.

Transition Properties

• transition-property: The name of the CSS property (e.g. width, background-color, or all).
• transition-duration: How many seconds or milliseconds the transition lasts (e.g. 0.3s).
• transition-timing-function: The speed curve (e.g. linear, ease, ease-in-out).
• transition-delay: A delay for when the transition starts.

The Shorthand Property

You can define all of these in a single line using the transition property.

.button {
    transition: background-color 0.5s ease-in 0.1s;
}