Q145- How do CSS transitions and animations differ?

Both CSS transitions and CSS animations are used to create visual effects, but they differ in control, complexity, and triggering.

---

1️⃣ CSS Transitions

• Used to smoothly change a property from one value to another.
• Triggered by user interaction (like :hover) or JS property changes.
• Simpler and limited to start → end.

Example:

.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: red; /* transition triggers automatically */
}

✅ Behavior: Changes background-color from blue → red smoothly on hover.

---

2️⃣ CSS Animations

• Can define complex sequences of changes with keyframes.
• Can run automatically or infinitely, independent of user interaction.
• Supports loops, delays, and multiple steps.

Example:

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

.ball {
  width: 50px;
  height: 50px;
  background: red;
  animation: bounce 1s infinite;
}

✅ Behavior: The ball continuously bounces up and down.

---

🔹 Key Differences

Feature	Transition	Animation
Trigger	Interaction (hover, click)	Automatically or JS controlled
Complexity	Simple start → end	Multiple keyframes & steps
Looping	No	Yes (infinite)
Control	Limited	Full control (duration, delay, iteration count)

---

💡 In Short:

• Transition: smooth change between two states, usually on hover or state change.
• Animation: full control over sequences, can run continuously or in loops.