HTML & CSS Interview Question #112

What is a CSS transition?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

A CSS transition animates a change between values of supported properties when the computed value changes. Developers can control the property, duration, timing function, and delay.

Detailed Explanation

A CSS transition animates a change between values of supported properties when the computed value changes. Developers can control the property, duration, timing function, and delay.

Transitions are appropriate for state changes such as hover, focus, expanding controls, and color changes. For performance-sensitive motion, transform and opacity are often good candidates because they can avoid some expensive layout and paint work, although actual browser behavior should be measured.

Code Example

.button {
    transform: translateY(0);
    transition:
        transform .2s ease,
        opacity .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}