HTML & CSS Interview Question #116

What are CSS keyframe animations?

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

Quick Interview Answer

Keyframe animations define multiple stages of an animation using @keyframes and apply them through animation properties. They are useful when an effect requires more than a simple transition between two states.

Detailed Explanation

Keyframe animations define multiple stages of an animation using @keyframes and apply them through animation properties. They are useful when an effect requires more than a simple transition between two states.

Animations can control duration, timing, delay, repetition, direction, fill behavior, and play state. Motion should remain purposeful and should respect reduced-motion preferences.

Code Example

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.loading {
    animation: pulse 1.2s ease-in-out infinite;
}