🎬 CSS COURSE – MODULE 12: TRANSITIONS & ANIMATIONS

📁 File: animations.md

🎬 CSS Animations & Transitions

📌 Introduction

Animations in CSS help you:

• improve user experience
• add smooth interactions
• make UI feel modern and dynamic

👉 There are 2 main types:

• Transitions (simple effects)
• Animations (advanced keyframes)

⚡ 1. Transitions (SMOOTH CHANGES)

📌 Basic Transition

button {
  transition: 0.3s;
}

✔ Makes changes smooth

🎯 Hover Effect Example

button {
  background: blue;
  transition: 0.3s;
}

button:hover {
  background: red;
}

✔ Smooth color change on hover

⏱️ 2. Transition Properties

div {
  transition: all 0.5s ease;
}

Parts:

• all → apply to all properties
• 0.5s → duration
• ease → timing function

📊 Timing Functions

🔁 3. Transform (MOVEMENT)

div:hover {
  transform: scale(1.1);
}

Common transforms:

transform: translateX(20px);
transform: rotate(10deg);
transform: scale(1.2);

🎬 4. CSS Animations (KEYFRAMES)

📌 Basic Structure

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

▶️ Apply Animation

div {
  animation: move 2s;
}

🔄 5. Advanced Keyframes

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

div {
  animation: bounce 1s infinite;
}

✔ Infinite looping animation

🧠 6. Animation Properties

animation: name duration timing delay iteration;

Example:

animation: bounce 2s ease-in-out 0s infinite;

🎨 7. Real UI Example

<button>Hover Me</button>

button {
  padding: 10px 20px;
  background: blue;
  color: white;
  border: none;
  transition: 0.3s;
}

button:hover {
  transform: scale(1.1);
  background: darkblue;
}

⚠️ Common Mistakes

• Overusing animations ❌
• Too fast animations ❌
• Using animations everywhere ❌
• Ignoring performance ❌

🎯 Best Practice

👉 Use animation for:

• buttons
• loading states
• hover effects
• small UI feedback

❌ Don’t animate everything

🧪 Mini Exercise

Create:

1. A button that scales on hover
2. A box that moves left-right
3. A bouncing element using keyframes
4. A smooth color transition card