CSS Animations and Transitions

What is it?

CSS transitions animate a property from one value to another over a duration. @keyframes animations define multi-step sequences. Both run purely in CSS, offloaded to the GPU for smooth 60fps performance.

Why does it matter?

Animations communicate state changes, guide attention, and add delight. CSS animations are more performant than JavaScript animations because they use the compositor thread.

Learn CSS transitions for hover effects, @keyframes animations, and performance best practices — no JavaScript required.

Real-World Use Cases

🎨 Button hover effects - Transition background-color and transform on hover creates satisfying button feedback.
⏳ Loading spinner - @keyframes rotate creates a spinner that needs no JavaScript — pure CSS.
📢 Notification toast - slideIn brings notifications from the edge; fadeOut removes them after a delay.
🎯 Progress bar - Transition width — animate from 0% to the target percentage.

CSS Transitions

.btn {
    background-color: #6366f1;
    transform: scale(1);
    transition: background-color 200ms ease,
                transform         200ms ease;
}
.btn:hover {
    background-color: #4f46e5;
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(99,102,241,0.4);
}

/* Shorthand: all properties */
.card { transition: all 300ms ease; }

@keyframes Animations

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

@keyframes pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.95); }
}

@keyframes slideInFromTop {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.spinner  { animation: spin 1s linear infinite; }
.skeleton { animation: pulse 1.5s ease-in-out infinite; }
.modal    { animation: slideInFromTop 300ms ease-out both; }

Performance Best Practice

/* ONLY animate transform and opacity */
/* They run on the compositor thread — smooth 60fps */

/* BAD: triggers layout reflow every frame */
@keyframes bad { from { left: 0; }     to { left: 100px; } }

/* GOOD: compositor thread — no layout reflow */
@keyframes good { from { transform: translateX(0); }
                  to   { transform: translateX(100px); } }

/* AVOID animating: width, height, margin, padding, top, left */
/* These trigger layout recalculation on every frame */

Q: Why should I avoid animating width, height, and margin?

Animating layout properties triggers the browser to recalculate layout (reflow) and repaint every animation frame — very expensive. Instead use transform:translateX/Y for movement, transform:scale for size, and opacity for fading. These run on the compositor thread (GPU) and maintain 60fps even on mobile.

Quick Access

CSS Transitions

@keyframes Animations

Performance Best Practice

Related Posts

Comments (0)

Leave a Comment