✅ Module 10: CSS Transitions & Animations (🎞️⚡)

⚡ Module 10: CSS Transitions & Animations

CSS allows you to add smooth visual transitions and animations to elements. This makes your website feel more dynamic and engaging. 🚀

🌀 Transitions

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: green;
}
  

• transition-property: The property to animate
• transition-duration: How long the animation takes
• transition-timing-function: linear, ease, ease-in-out
• transition-delay: Delay before starting

🎬 Animations

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.box {
  animation: slideIn 1s ease-in-out;
}
  

You can animate almost any CSS property — position, size, opacity, color, and more.

✨ Animation Properties

• animation-name: Refers to @keyframes
• animation-duration, animation-delay
• animation-iteration-count: infinite or number
• animation-direction: alternate, normal
• animation-fill-mode: forwards, backwards

✅ Summary

• Use transitions for hover and focus effects.
• Animations allow for more complex motion and storytelling.
• Keep motion subtle to avoid distractions. 🌊