Animation Shorthand

Animation Shorthand

Instead of writing out every animation sub-property individually, you can combine them all into a single animation shorthand property. This is how most developers write animations in practice.

The Full Longhand

.element {
    animation-name: slideIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

The Shorthand Equivalent

/* name | duration | timing | delay | count | direction | fill | play-state */
.element {
    animation: slideIn 0.5s ease-out 0.2s 1 normal forwards running;
}

Shorthand Order

The order is flexible, but there are two rules:

1. The first time value is duration, the second time value is delay
2. The animation name can appear anywhere (but convention is first or last)

/* These are equivalent: */
animation: slideIn 0.5s ease-out 0.2s forwards;
animation: 0.5s ease-out 0.2s forwards slideIn;

Common Shorthand Patterns

/* Minimum: name + duration */
animation: fadeIn 0.3s;

/* With timing function */
animation: fadeIn 0.3s ease-out;

/* With delay */
animation: fadeIn 0.3s ease-out 0.5s;

/* Keeping end state */
animation: fadeIn 0.3s ease-out forwards;

/* Infinite loop */
animation: spin 1s linear infinite;

/* Alternating loop */
animation: pulse 2s ease-in-out infinite alternate;

/* Full specification */
animation: bounce 0.5s ease 0.1s 3 alternate both;

Multiple Animations

Apply multiple animations to one element by separating with commas:

.element {
    animation: fadeIn 0.5s ease forwards,
               slideUp 0.5s ease forwards,
               glow 2s ease-in-out 1s infinite alternate;
}

All three animations run simultaneously. Each has its own timing and behavior.

Longhand vs Shorthand Comparison

Situation	Recommended
Simple, single animation	Shorthand — concise and clean
Complex with many sub-properties	Shorthand — still more readable than 8 lines
Overriding a single property	Longhand — change just what you need
Multiple animations	Shorthand — comma-separated is cleaner

Overriding Individual Properties

You can mix shorthand and longhand — longhand overrides specific values:

.element {
    animation: slideIn 0.5s ease forwards;
}

.element.delayed {
    animation-delay: 1s;  /* Override just the delay */
}

.element.paused {
    animation-play-state: paused;  /* Pause without rewriting shorthand */
}

Common Shorthand Templates

/* Entrance animation */
animation: fadeSlideUp 0.5s ease-out both;

/* Loading spinner */
animation: spin 0.8s linear infinite;

/* Hover attention */
animation: shake 0.4s ease 2;

/* Floating element */
animation: float 3s ease-in-out infinite alternate;

/* Staggered entrance (override delay per item) */
animation: fadeIn 0.4s ease both;
animation-delay: calc(var(--i) * 0.1s);

Using CSS Custom Properties with Animations

.card {
    --delay: 0s;
    animation: fadeSlideUp 0.5s ease var(--delay) both;
}

.card:nth-child(1) { --delay: 0.1s; }
.card:nth-child(2) { --delay: 0.2s; }
.card:nth-child(3) { --delay: 0.3s; }

Key Takeaways

• The shorthand combines all 8 animation properties into one line
• First time value = duration, second time value = delay
• Minimum is animation: name duration
• Separate multiple animations with commas
• Use longhand to override specific properties when needed
• CSS custom properties work with shorthand for dynamic values