patternjavascriptTip

CSS Keyframe Animations: @keyframes and animation Shorthand

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

keyframesCSS animationanimation fill-modeanimation shorthandcss keyframecompositor thread

Problem

You need a repeating or multi-step animation that does not depend on JavaScript.

Solution

Define the animation with @keyframes and apply it via the animation shorthand property.

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

.card {
  animation: fadeInUp 0.4s ease-out forwards;
}

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

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

In Tailwind with a custom plugin:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        }
      },
      animation: { 'fade-in-up': 'fadeInUp 0.4s ease-out forwards' },
    },
  },
};

Why

CSS animations run on the compositor thread for transform and opacity changes, achieving 60fps without blocking the main thread. They require zero JavaScript once defined.

Gotchas

animation-fill-mode: forwards keeps the element in the final keyframe state after the animation ends — without it the element snaps back.
Multiple animations on one element are comma-separated: animation: spin 1s linear infinite, pulse 2s ease alternate infinite.
The animation-play-state: paused can pause an animation declaratively without removing it.
Avoid animating layout-triggering properties like width, height, top, or left — use transform instead.

Revisions (0)

No revisions yet.