CSS Animations

CSS Animations: Multi-Step Keyframes and Continuous Motion

While CSS transitions animate between two states (like default and :hover), CSS animations run multi-step sequences automatically on page load or loop indefinitely using @keyframes. Loading spinners, skeleton placeholders, notification pulses, and subtle entrance fades all rely on @keyframes.

Defining @keyframes and Animation Properties

First define named steps with @keyframes using from/to or percentage stops (0%, 50%, 100%). Then attach the animation to a selector with animation: name duration timing-function iteration-count fill-mode;.

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

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.toast-alert {
    animation: fade-slide-up 0.25s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .toast-alert {
        animation: none;
    }
}

Understanding animation-fill-mode

By default, an entrance animation snaps back to its original CSS state the instant it finishes playing. Adding forwards (animation-fill-mode: forwards;) locks the element on its final to (100%) state once complete. You can also combine backwards or both to apply the 0% keyframe styles immediately during an animation-delay period.

Common Mistakes to Avoid

• Animating top, left, or width inside busy loops: Continuous layout animations drain laptop batteries and drop frames; animate GPU-composited transform and opacity instead.
• Ignoring prefers-reduced-motion: Visitors with vestibular disorders experience dizziness from sweeping loops; disable decorative motion inside @media (prefers-reduced-motion: reduce).
• Using ease on continuous spinners: ease slows down at every full turn and makes spinners wobble; always use linear timing for 360-degree loaders.

Frequently Asked Questions

How do I pause a CSS animation on hover?

Set animation-play-state: paused; inside the element's :hover rule so spinning badges or marquees pause when inspected.

What is the difference between CSS transitions and CSS animations?

Transitions require a state trigger (:hover, class toggle) and move from A to B, whereas @keyframes animations can start automatically, pause, reverse, loop infinitely, and pass through intermediate waypoints.