HTML & CSS Interview Question #117

What is the difference between CSS transitions and animations?

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

Quick Interview Answer

A transition normally responds to a change from one property state to another, such as hover or adding a class. A keyframe animation can define several intermediate stages and can start or repeat without requiring the same kind of state transition.

Detailed Explanation

A transition normally responds to a change from one property state to another, such as hover or adding a class. A keyframe animation can define several intermediate stages and can start or repeat without requiring the same kind of state transition.

Use transitions for straightforward UI state changes and keyframes for multi-stage or repeating sequences. Either technique can be inappropriate when motion harms usability or performance.

Code Example

.button {
    transition: background-color .2s ease;
}

.button:hover {
    background-color: #1d4ed8;
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}