Transitions, Transforms & Keyframe Animations

1. Simple Definition

CSS me kisi element ko smoothly ek state se dusri state me animate karne ke do raste hote hain: Transitions jo kisi trigger (jaise :hover) par property ko smoothly shift karte hain, aur @keyframes Animations jo bina kisi user interaction ke continuous loops ya complex cinematic timelines run kar sakte hain. Transforms (scale, rotate, translate) GPU par chalte hain aur silky-smooth 60fps performance dete hain.

2. Real-Life Analogy

3. Why Do We Need It?

Bina transition ke button hover karte hi jhatke se color badalta hai jo robotic lagta hai. Smooth micro-interactions website ko alive aur expensive feel dete hain.

4. Syntax

/* 1. Smooth Transition */
.btn {
  background-color: #2563eb;
  /* transition: PROPERTY DURATION TIMING-FUNCTION DELAY */
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover {
  background-color: #1d4ed8;
  transform: translateY(-3px) scale(1.02); /* Smooth lift */
}

/* 2. Keyframes Infinite Pulse Animation */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.live-badge {
  animation: pulse 2s infinite ease-in-out;
}

5. Basic Example (Interactive Hover Card & Spinner)

<!-- 1. Smooth Hover Card -->
<div class="hover-card">
  <h3>Hover Over Me!</h3>
  <p>GPU Accelerated Transform Effect.</p>
</div>

<!-- 2. Infinite Loading Spinner -->
<div class="spinner"></div>

<style>
  .hover-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }
  .hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

6. Output / Expected Result

7. Code Explanation: GPU Acceleration Rules

Performance ke liye sirf in 2 properties ko animate karein:

• transform: translate(), scale(), rotate().
• opacity: Transparency transition.

Kyunki ye properties browser ke Compositor Thread (GPU) par run hoti hain bina Reflow ya Repaint trigger kiye!

8. Real-World Example

Instagram stories ke active gradient rings, Twitter like button heart explosion, aur loading spinners CSS keyframes se bante hain.

9. Common Mistakes

10. Best Practices

• Hamesha prefers-reduced-motion media query provide karein taaki sensitive users ke liye animations pause ho sakein.
• Transition duration ko 0.15s se 0.3s ke beech rakhein (zyada lamba animation website ko sluggish banata hai).

11. Try It Yourself

Playground me spinner banayein aur uska animation-duration 0.8s se badal kar 2s karein.

12. Challenge

Ek Bouncing Ball keyframe animation banayein jo upar se niche gire aur zameen ko touch karte hi thoda stretch/squash ho jaye.

13. Interview Questions

14. Quick Revision

• transition requires a trigger (hover/focus).
• @keyframes creates autonomous timelines.
• Animate only transform and opacity for maximum speed.

15. FAQ

Transitions, Transforms & Keyframe Animations

1. Simple Definition

CSS Transitions provide smooth, interpolated changes between property states (such as hover effects). CSS Transforms manipulate an element's coordinate geometry (translate, rotate, scale, skew) without disturbing document layout. Keyframe Animations (@keyframes) create intricate multi-step motion sequences running continuously or on demand.

2. Real-Life Analogy

3. CSS Transitions

/* property duration timing-function delay */
.button {
  background-color: #2563eb;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

4. CSS Transforms (Hardware Accelerated)

/* Transforms are processed by GPU without triggering DOM reflow */
.interactive-card {
  transform: scale(1.05) rotate(2deg);
}

5. Keyframe Animations (@keyframes)

@keyframes pulse-glow {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.pulse-badge {
  animation: pulse-glow 2s infinite ease-in-out;
}

6. Common Mistakes

7. Best Practices

• Animate only transform and opacity for silk-smooth 60 FPS rendering.
• Respect user motion preferences using @media (prefers-reduced-motion: reduce).
• Use will-change: transform sparingly for complex graphical elements.

8. Practice Exercise

9. Interview Questions

10. Summary / Cheat Card

• Transitions smoothly interpolate property changes.
• Transforms manipulate position, scale, and angle on the GPU.
• Keyframes script multi-stage animation sequences.
• Always honor prefers-reduced-motion for accessibility.

11. FAQ