What are CSS Transitions?

CSS Transitions allow you to define how an element changes from one state to another over a given duration. Instead of an immediate change (e.g., a button instantly changing color on hover), transitions provide a smooth, animated effect. This significantly enhances the user experience by making interactions more fluid and visually appealing.

Transitions are ideal for simple state changes triggered by user interactions (like hovers, clicks, or focus) or JavaScript modifications of CSS properties.

Transition Properties

To define a transition, you typically use a combination of four CSS properties, often combined into the `transition` shorthand property.

`transition-property`

Specifies the CSS property to which the transition effect should be applied. You can specify one or more properties, or `all` for all animatable properties.

.box {
    transition-property: background-color;
}

.button {
    transition-property: width, transform;
}

.element {
    transition-property: all; /* Transitions all animatable properties */
}

`transition-duration`

Specifies how long the transition animation should take to complete. This value is typically given in seconds (`s`) or milliseconds (`ms`).

.box {
    transition-duration: 0.5s;
}

.button {
    transition-duration: 300ms;
}

`transition-timing-function`

Defines the speed curve of the transition effect. This determines how the animation progresses over time (e.g., starting slow and speeding up).

• `ease` (default): Slow start, fast middle, slow end.
• `linear`: Same speed from start to end.
• `ease-in`: Slow start.
• `ease-out`: Slow end.
• `ease-in-out`: Slow start and end.
• `cubic-bezier(n, n, n, n)`: Custom speed curve.
• `steps(integer, start|end)`: Transition in steps.

.box {
    transition-timing-function: ease-in-out;
}

.button {
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

`transition-delay`

Specifies a delay before the transition starts. This value is also given in seconds (`s`) or milliseconds (`ms`).

.box {
    transition-delay: 0.1s; /* Starts after 100ms */
}

The `transition` Shorthand Property

The most common way to define transitions is using the `transition` shorthand property, which combines all four properties in a specific order: `transition: property duration timing-function delay;`

.my-element {
    width: 100px;
    height: 100px;
    background-color: var(--primary-color);
    transition: background-color 0.5s ease-out 0.1s, width 0.3s linear;
}

.my-element:hover {
    background-color: var(--secondary-color);
    width: 150px;
}

Animatable Properties

Not all CSS properties can be animated with transitions. Only properties that have "intermediate states" (i.e., they can smoothly change from one value to another) are animatable. Examples include:

• Colors: `background-color`, `color`, `border-color`
• Dimensions: `width`, `height`, `font-size`, `padding`, `margin`
• Transforms: `transform` (e.g., `translate`, `rotate`, `scale`)
• Opacity: `opacity`
• Shadows: `box-shadow`, `text-shadow`
• Positioning: `top`, `left`, `right`, `bottom`

Properties like `display: none` to `display: block` or `visibility: hidden` to `visibility: visible` cannot be directly transitioned because they don't have intermediate states. However, you can combine `opacity` with `visibility` or `max-height` with `overflow` to achieve similar effects.