HTML & CSS Interview Question #113

What do transition-property, duration, timing-function, and delay do?

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

Quick Interview Answer

transition-property identifies which properties should transition. transition-duration specifies how long the change takes, transition-timing-function controls the rate of change over time, and transition-delay specifies how long to wait before beginning.

Detailed Explanation

The transition shorthand can set these values together. Avoid transition: all in complex components when only a few properties should animate, because unrelated future property changes may then animate unexpectedly.

Code Example

.card {
    transition-property:
        transform, box-shadow;
    transition-duration: .2s;
    transition-timing-function: ease;
    transition-delay: 0s;
}