CSS

🎬 Ultimate Tutorial on the animation Shorthand in CSS

📌 What Is the animation Shorthand?

The animation property is a powerful shorthand that lets you define all animation-related properties in one clean line! Instead of writing 8+ animation properties separately, you can bundle them into a single rule. 🎉
It configures the name, duration, delay, timing, direction, iteration count, fill-mode, play-state,and even timeline (in modern CSS).

>>“The animation shorthand is your entire animation packed into one elegant line.”

🧩 Full Syntax

Full shorthand syntax

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

Note

Not all parts are required — only name and duration are mandatory.

📦 Example: A Complete Animation

Full Example

.box {
  animation: slideUp 1s ease-in-out 0.3s infinite alternate both running;
}

Part	Value	Meaning
slideUp	animation-name	Which keyframes to use
1s	animation-duration	One loop lasts 1 second
ease-in-out	animation-timing-function	Smooth acceleration + deceleration
0.3s	animation-delay	Start after 300ms
infinite	iteration-count	Loop forever
alternate	animation-direction	Forward → backward → forward…
both	animation-fill-mode	Apply first frame during delay, last frame after end
running	animation-play-state	Animation active (not paused)

🧪 Basic Example With Keyframes

Keyframes Example

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

.element {
  animation: slideUp 0.8s ease-out forwards;
}

✔ Simple reveal-on-load animation
✔ Stays in the final visible state thanks to forwards

🎯 Shorthand Order Rules

The shorthand accepts the values in any order, as long as:

duration comes before delay
Numbers like infinite or 3 match iteration-count
Keywords like alternate, forwards, running are recognized automatically

🚀 Multiple Animations in One Shorthand

Multiple animations

.box {
  animation: fadeIn 1s ease-out forwards,
             moveRight 2s linear infinite;
}

✔ Animations separated by commas run simultaneously.

🧠 What Each Animation Property Does (Quick Summary)

Property	Purpose
animation-name	Links to @keyframes
animation-duration	Time for one animation cycle
animation-delay	Wait before animation begins
animation-timing-function	Animation easing curve
animation-direction	Forward, reverse, alternate
animation-iteration-count	How many times to repeat animation
animation-fill-mode	Final/initial frame behavior
animation-play-state	Paused or running
animation-timeline	Scroll/view-driven timeline (optional)

🌈 Real-World Examples

1️⃣ Fade In on Page Load

Fade-in

.fade {
  animation: fadeIn 1s ease-out forwards;
}

2️⃣ Button Hover Ripple

Ripple

@keyframes ripple {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

button:hover::after {
  animation: ripple 0.4s ease;
}

3️⃣ Infinite Loader Spin

Loader

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

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

4️⃣ Scroll-Driven Parallax (With Timeline)

Scroll-driven

@scroll-timeline scrollAnim {
  scroll-offsets: 0%, 100%;
}

.bg {
  animation: parallax 1s linear;
  animation-timeline: scrollAnim;
}

@keyframes parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(-150px); }
}

✔ True native parallax without JavaScript!

🛠️ Best Practices

Use the shorthand for clean, readable code
Keep animations subtle for good UX
Prefer transform + opacity for performance
Use forwards for reveal animations
Use alternate for looping motions
Use animation-play-state for interactivity

🔍 Debugging Tips

If animation doesn't run, check keyframe name
Ensure duration is non-zero
Use DevTools → Animations panel to visualize curves
Check specificity if shorthand gets overridden

🔗 Helpful Resources

>>“Master the animation shorthand and you master CSS motion itself.” ✨