⚡ Day 19 — Transitions, Transforms & Animations

Welcome to Day 19! 🎬 Now that you can structure and style layouts, it’s time to make them move. CSS animations and transitions bring interactivity and delight to your pages without JavaScript. We’ll cover smooth hover effects, element transformations, and complex keyframe animations.

🎨 1️⃣ Transitions — Smooth State Changes

Transitions let you animate changes between two states (like hover effects). Use the transition property with duration, timing, and delay.

button {
  background:#43a047;
  color:white;
  padding:12px 24px;
  border:none;
  transition: background 0.4s ease, transform 0.4s ease;
}
button:hover {
  background:#2e7d32;
  transform: scale(1.1);
}

🧭 2️⃣ Transition Properties

• transition-property: the CSS property to animate (e.g., background, transform)
• transition-duration: how long the animation lasts
• transition-timing-function: ease, linear, ease-in-out
• transition-delay: time before it starts

🧩 3️⃣ Transforms — Moving and Shaping Elements

The transform property lets you translate, rotate, scale, or skew elements.

.box {
  width: 120px;
  height: 120px;
  background:#43a047;
  transform: rotate(15deg) scale(1.1);
}

Common Transform Functions

• translate(x, y) — move an element
• rotate(deg) — rotate around center
• scale(x, y) — resize proportionally
• skew(x, y) — tilt the shape

🎞 4️⃣ Combining Transform + Transition

Combine both to make interactive cards or buttons.

.card {
  background:#c8e6c9;
  width:200px;
  height:200px;
  transition:transform 0.4s;
}
.card:hover {
  transform:rotate(5deg) scale(1.05);
}

🧠 5️⃣ Animations with @keyframes

For multi-step motion effects, use @keyframes to define frames of animation.

@keyframes moveBox {
  0% { transform:translateX(0); background:#43a047; }
  50% { transform:translateX(150px); background:#66bb6a; }
  100% { transform:translateX(0); background:#43a047; }
}
.box {
  width: 100px; height: 100px;
  animation: moveBox 3s infinite ease-in-out;
}

⚙️ 6️⃣ Animation Properties

• animation-name: the @keyframes name
• animation-duration: total time for one cycle
• animation-iteration-count: number or infinite
• animation-direction: normal | reverse | alternate
• animation-timing-function: ease | linear | ease-in
• animation-delay: start delay

🧩 7️⃣ Practical Example: Loading Spinner

@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.loader {
  width: 60px; height: 60px;
  border: 6px solid #c8e6c9;
  border-top-color:#43a047;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

🧩 8️⃣ Animation Shorthand

animation: spin 2s linear infinite alternate;

🧠 9️⃣ Practice Task

1. Create a hover button that scales and changes color using transition.
2. Build a bouncing ball using @keyframes animation.
3. Combine transform and animation to make a rotating logo.

🧮 Mini Quiz

• Q1: What’s the difference between transition and animation?
• Q2: Which property controls rotation?
• Q3: How can you loop an animation forever?

🎯 Summary

Today you learned how to add motion and energy to your web designs using transitions, transforms, and animations. With these tools, you can enhance user experience without heavy scripts. Tomorrow, we’ll wrap up the CSS series with **Responsive Design & Media Queries** to make your layouts adapt to every device.

← Prev Next →