Keyframe Basics

The Key to Animation

Alright — time to move beyond A → B motion.

With @keyframes, we design the entire journey, not just the endpoints.

Transitions react.
Animations perform.

---

🎬 Declaring a Keyframe

A keyframe block defines how something changes over time.

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

This is a full motion arc — up, then down, smooth loop.

---

🎛 Attaching an Animation

.orb {
  animation: float 2s ease-in-out infinite;
}

Order matters:

animation: name duration timing-function iteration-count;

That’s the core anatomy.

---

🧩 Using Keywords Instead of Percentages

You can also use:

from {
  opacity: 0;
}
to {
  opacity: 1;
}

Equivalent to 0% → 100%.
Perfect for simple fade or slide sequences.

---

🎚 Multi-Step Sequences

Keyframes can have as many steps as you want:

@keyframes spinPop {
  0% {
    transform: scale(0.8) rotate(0deg);
  }
  30% {
    transform: scale(1) rotate(180deg);
  }
  70% {
    transform: scale(1.15) rotate(270deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

This is how we shape character and personality — dynamic, playful, dramatic.

---

---

➡️ Next page: Animation Properties — duration, easing, delay, direction, fill-mode, play-state, and iteration control.