How to Use Animation Shorthand in CSS: Syntax and Examples

Use the animation shorthand property in CSS to combine multiple animation properties like name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state into one line. This makes your CSS cleaner and easier to manage.

Syntax

The animation shorthand property combines several animation properties into one line. The order is flexible but usually follows this pattern:

• animation-name: The name of the keyframes to use.
• animation-duration: How long the animation lasts (e.g., 2s).
• animation-timing-function: The speed curve (e.g., ease, linear).
• animation-delay: Time to wait before starting (e.g., 1s).
• animation-iteration-count: How many times to repeat (e.g., infinite).
• animation-direction: Direction of animation (e.g., normal, alternate).
• animation-fill-mode: What styles apply before/after animation (e.g., forwards).
• animation-play-state: Whether animation is running or paused.

You can omit optional parts; the browser uses defaults.

css

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;

Example

This example shows a box that changes color and moves horizontally using the animation shorthand property. It runs for 3 seconds, repeats infinitely, and alternates direction.

css

@keyframes slideAndColor {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  50% {
    background-color: blue;
    transform: translateX(100px);
  }
  100% {
    background-color: red;
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  animation: slideAndColor 3s ease-in-out 0s infinite alternate forwards;
}

Output

A 100x100 pixel square that smoothly moves left to right 100px and changes color from red to blue and back, repeating forever and reversing direction each time.

Common Pitfalls

Common mistakes when using animation shorthand include:

• Forgetting the animation-name, which makes the animation not run.
• Mixing up the order of values, which can cause unexpected behavior.
• Omitting units like s for seconds in duration or delay.
• Using multiple animations without separating them by commas.

Always double-check your values and use commas to separate multiple animations.

css

/* Wrong: Missing animation-name and no units */
.box {
  animation: 3s ease-in-out infinite;
}

/* Right: Includes animation-name and units */
.box {
  animation: slideAndColor 3s ease-in-out infinite;
}

Quick Reference

Property	Description	Example Value
animation-name	Name of the keyframes	slideAndColor
animation-duration	Length of animation	3s
animation-timing-function	Speed curve	ease-in-out
animation-delay	Wait before start	0s
animation-iteration-count	Number of repeats	infinite
animation-direction	Play direction	alternate
animation-fill-mode	Styles before/after	forwards
animation-play-state	Running or paused	running

Key Takeaways

Use the animation shorthand to combine multiple animation properties into one line for cleaner CSS.

Always include the animation-name and animation-duration for the animation to work.

Separate multiple animations with commas when using shorthand for more than one animation.

Remember to add units like 's' for seconds in duration and delay values.

Check the order and completeness of values to avoid unexpected animation behavior.