🎨 Mastering CSS Transitions & Animations — Beginner to Advanced 🚀

🧠 Part 1: CSS Transitions — Smooth State Changes

🔹 What is a Transition?

A transition allows CSS properties to change over time, creating smooth motion instead of an instant switch.

✅ Basic Syntax:

selector {
  transition: property duration timing-function delay;
}

✅ Example:

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: coral;
  transition: background 0.3s ease, transform 0.5s ease-in-out;
}

.box:hover {
  background: teal;
  transform: scale(1.2);
}
</style>

Hover over the .box and see it smoothly scale and change color.

🔹 Properties You Can Transition

• color, background, opacity, transform, box-shadow, height, width, etc.

---

🧠 Part 2: Deep Dive into Transition Properties

⏱ Common Timing Functions

• ease (default)

• linear

• ease-in

• ease-out

• ease-in-out

• cubic-bezier() — custom speed curves

---

🧠 Part 3: CSS Animations — Multi-step Motion 🎬

🔹 What are Animations?

Animations let you change styles over time using @keyframes. Unlike transitions, animations are not triggered by events like :hover.

✅ Syntax:

@keyframes animName {
  0%   { transform: scale(1); }
  100% { transform: scale(1.5); }
}

.element {
  animation: animName 2s ease-in-out infinite;
}

✅ Example:

<div class="pulse"></div>

<style>
.pulse {
  width: 100px;
  height: 100px;
  background: purple;
  animation: pulseAnim 1s infinite ease-in-out;
}

@keyframes pulseAnim {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
</style>

This .pulse div will grow and shrink in a loop.

---

🧠 Part 4: Animation Properties Breakdown

✅ Bouncing Ball Example:

<div class="ball"></div>

<style>
.ball {
  width: 50px;
  height: 50px;
  background: tomato;
  border-radius: 50%;
  position: relative;
  animation: bounce 1s infinite alternate ease-in-out;
}

@keyframes bounce {
  0%   { top: 0; }
  100% { top: 200px; }
}
</style>

---

🧠 Part 5: Mixing Transitions & Animations

.box {
  transition: transform 0.3s ease;
  animation: spin 5s linear infinite;
}

.box:hover {
  transform: scale(1.2);
}

@keyframes spin {
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}

---

💼 Interview Questions (3 Years of Experience)

1. What is the difference between CSS transitions and animations?

Answer: Transitions are event-driven (e.g., hover), and animations are timeline-driven using @keyframes.

2. Can you animate display: none to block?

Answer: No. You need to animate opacity, transform, or use height/width as a workaround.

3. What does animation-fill-mode: forwards do?

Answer: It keeps the final state of the animation after it finishes.

4. How can you pause/resume a CSS animation?

Answer:

animation-play-state: paused; // or 'running'

Used with JavaScript or pseudo-classes like :hover.

---

🧪 Pro Tips

✅ Use will-change: transform for performance boosts
✅ Combine multiple animations: animation: spin 1s ease, pulse 2s ease-in-out
✅ Use animation-play-state for interactive control

---

📚 External Resources

• Animate.css

• CSS Tricks on Animations

• Keyframes Visualizer

---

📎 Useful Links

🔗 LinkedIn: https://linkedin.com/in/krishan86

🐦 Twitter (X): https://x.com/KrishanCodes
🔗 GitHub Repo: Frontend-Elevate