CSS

🎞️ Mastering animation-name in CSS

📌 What Is animation-name?

The animation-name property is used to specify which keyframe animation should run on an element. It connects your CSS rule to a defined @keyframes block. Without animation-name, animations cannot run. 🎬

>>“Think of animation-name as the link between your element and its motion.”

🧩 Basic Syntax

Syntax

animation-name: keyframeName;

You must define the keyframe animation using @keyframes with the same name.

@keyframes Example

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Using animation-name

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
}

🎯 Multiple Animations

You can assign multiple animation names by separating them with commas.

Multiple Animations

animation-name: fadeIn, slideUp;

Multiple Keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

Each animation needs its own animation-duration, timing-function, etc.

🧠 Using none

The keyword none stops animations or prevents one from running.

Stopping Animations

animation-name: none;

🎨 Real-World Example

Button Hover Animation

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

button:hover {
  animation-name: pop;
  animation-duration: 0.3s;
}

✔ When the user hovers the button, it “pops” briefly.

🌈 Full Animation Example

Complex Example

@keyframes moveAndFade {
  0%   { opacity: 0; transform: translateX(-50px); }
  50%  { opacity: 1; }
  100% { transform: translateX(0); }
}

.card {
  animation-name: moveAndFade;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

📦 animation-name in Shorthand

The animation shorthand includes animation-name.

Shorthand Example

animation: fadeIn 2s ease-in-out 1s infinite alternate;

Part	Meaning
fadeIn	animation-name
2s	animation-duration
ease-in-out	animation-timing-function
1s	animation-delay
infinite	animation-iteration-count
alternate	animation-direction

🛠️ Debugging Tips

Ensure @keyframes name matches exactly
Check if animation-duration is added — without it animation won’t run
Use DevTools to inspect computed animation properties
Avoid typos (case-sensitive!)

🔗 Helpful Resources

>>“Animations bring life to the web — and it all starts with a name.” ✨