Lesson: CSS Transitions

🎬 What are CSS Transitions?

Transitions let you smoothly change CSS properties over time, like colors, positions, or sizes.

⚙️ Basic Syntax

element {
  transition: [property] [duration] [timing-function] [delay];
}

Example:

.box {
  transition: all 0.3s ease-in-out;
}

🧪 Example: Hover Color Change

.button {
  background: blue;
  color: white;
  padding: 10px 20px;
  transition: background 0.3s;
}
.button:hover {
  background: darkblue;
}

🧪 Example: Scale on Hover

.card {
  transition: transform 0.3s;
}
.card:hover {
  transform: scale(1.05);
}

🧪 Example: Slide Up Caption

.image-box {
  position: relative;
  overflow: hidden;
}
.caption {
  position: absolute;
  bottom: -50px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  transition: bottom 0.4s ease;
}
.image-box:hover .caption {
  bottom: 0;
}

📌 Tips for Better Transitions

• Use transform for smoother performance
• Keep transitions short (0.2s - 0.5s)
• Test on different devices (not all support hover)

🚀 Try It Yourself!