CSS टॉपिक्स

🎨 CSS Design✨पाठ 15 / 16

Transitions और Transforms

translate(), scale(), rotate(), cubic-bezier() और GPU 60fps हार्डवेयर एक्सेलेरेशन से स्मूथ मोशन डिज़ाइन करना सीखें।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.transition बनाम animation: दोनों में क्या फ़र्क है और किसे कब इस्तेमाल करें।

2.Transition के 4 स्तंभ: Property, Duration, Timing Curve और Delay — हर token समझेंगे।

3.Transform के 4 Functions: translate(), scale(), rotate(), skew() — असली उपयोग के साथ।

4.GPU 60fps का सच: ब्राउज़र का rendering pipeline — transform क्यों top/left को हमेशा हराता है।

5.Timing Functions और Spring Easing: ease, ease-in-out, linear और bouncy cubic-bezier() का तुलनात्मक चार्ट।

6.Transforms जोड़ना और Micro-interactions: Multiple transforms chain करना और :active press feedback।

🤔 पहले समझो: Transition बनाम Animation — क्या फ़र्क है?

शुरुआत में सबसे ज़्यादा पूछा जाने वाला सवाल: "transition और animation में क्या अंतर है?" दोनों motion (हलचल) बनाते हैं, लेकिन काम बिल्कुल अलग तरीके से करते हैं।

🔀

CSS Transition

Transition दो states के बीच animate करता है — एक पहले, एक बाद। इसे trigger की ज़रूरत होती है (जैसे :hover, :focus, या JavaScript का class toggle)। बिना trigger के यह बस बैठा रहता है।

/* सामान्य → Hover state */

.card {

transform: translateY(0);

transition: transform 0.3s ease;

}

.card:hover { transform: translateY(-8px); }

इसके लिए: hover effects, button press, dropdown menus।

🔄

CSS Animation (@keyframes)

Animation @keyframes से एक पूरी choreography define करता है — multiple states, looping, forward/backward direction। यह बिना किसी trigger के अपने आप चल सकता है।

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.05); }

100% { transform: scale(1); }

}

.loader { animation: pulse 1.5s infinite; }

इसके लिए: loading spinner, पल्स करते badge, hero banner।

आसान नियम: अगर motion user के action से शुरू हो (hover, click) → transition इस्तेमाल करो। अगर motion खुद loop करे या multiple steps हों → @keyframes animation। यह पाठ transition के बारे में है। अगला पाठ @keyframes के बारे में होगा।

🏗️ Transform क्यों जीतता है: हथौड़े से दीवार तोड़ना vs कांच की लिफ्ट

यह समझने के लिए कि transform इतना ताकतवर क्यों है, आपको ब्राउज़र का rendering pipeline जानना ज़रूरी है।

ब्राउज़र का Rendering Pipeline

जब भी screen पर कोई pixel बदलता है, ब्राउज़र इन stages से गुज़रता है:

1. Style→2. Layout (Reflow)→3. Paint→4. Composite (GPU)

❌ `top`, `left`, `width`, `height` animate करने पर

Stage 2+3+4 सब trigger होते हैं। CPU को पेज के हर element की position दोबारा calculate करनी पड़ती है (Reflow), फिर सारे affected pixels redraw होते हैं (Repaint)। 500 DOM nodes वाले पेज पर यह 10–30ms per frame ले सकता है — यानी 60fps (16.6ms budget) से कम।

✅ `transform` और `opacity` animate करने पर

Stage 2 और 3 पूरी तरह skip होते हैं। Element अपने खुद के GPU layer पर promote हो जाता है। GPU सारा compositing math (move, scale, fade) dedicated hardware पर करता है। यह CPU से बिल्कुल independent चलता है — JavaScript freeze हो जाए तब भी animations 60fps पर चलते रहते हैं!

🏢 दफ्तर की कहानी: ऊपरी मंज़िल तक डेस्क ले जाना

हथौड़े वाला तरीका (top: -100px;): आप डेस्क को पहली मंजिल से दूसरी मंजिल पर ले जाने के लिए हथौड़ा उठाते हैं, छत की कंक्रीट, तार और प्लास्टर तोड़ देते हैं। पूरे ऑफिस के लोगों को काम रोककर अपनी मेजें हटानी पड़ती हैं। ब्राउज़र का CPU यही करता है Layout Reflow में — पूरा chaos, 15fps पर हकलाना!
कांच की लिफ्ट वाला तरीका (transform: translateY(-100px);): डेस्क को इमारत के बाहर लगी एक आधुनिक कांच की लिफ्ट में रखा जाता है जिसके अपने electric motors हैं। ऑफिस की एक भी ईंट नहीं हिलती, कोई परेशान नहीं होता, लिफ्ट 120 फ्रेम प्रति सेकंड की रफ्तार से सरकती है। यह है GPU Compositing!

📐 CSS Transform के 4 Functions — असली उपयोग के साथ

translate(x, y) / translateX / translateYखिसकाना — Position Nudge

Element को बाएँ/दाएँ (X) या ऊपर/नीचे (Y) सरकाता है — बिना किसी sibling element को हिलाए। margin-top के विपरीत, यह पड़ोसी elements को push नहीं करता।

transform: translateY(-8px); /* card ऊपर */

transform: translateX(-50%); /* center trick */

उपयोग: card hover lift, modal centering, slide-in sidebar।

scale(x) / scaleX / scaleYबड़ा / छोटा करना — Zoom

transform-origin (default center) से visual size बढ़ाता या घटाता है। 1 = 100% (original)। 1.05 = 105%। 0 = invisible (गायब)।

transform: scale(1.05); /* button बड़ा */

transform: scale(0.97); /* press effect */

उपयोग: button hover zoom, click-down press, gallery image zoom।

rotate(deg) / rotateX / rotateY / rotateZकोण पर घुमाना — Angular Spin

transform-origin के चारों तरफ घुमाता है। Positive = clockwise। Negative = counterclockwise। rotateY(180deg) card को 3D flip करता है!

transform: rotate(45deg); /* diamond badge */

transform: rotateY(180deg); /* card flip */

उपयोग: dropdown chevron arrow, card flip, @keyframes से loading spinner।

skew(x, y) / skewX / skewYतिरछा करना — Slanted Shear

Element को X या Y axis पर तिरछा झुकाता है — italic जैसा shear effect। Positive X = दाईं तरफ झुकाव। Negative = बाईं तरफ। बड़े values पर अजीब लग सकता है।

transform: skewX(-10deg); /* sporty angle */

transform: skewX(0deg); /* hover पर हटाएँ */

उपयोग: sports/gaming UI, diagonal price banner, creative header।

🔗 Multiple Transforms एक साथ लिखना (Chaining)

एक ही transform declaration में multiple functions space से अलग करके chain कर सकते हो। ये right-to-left apply होते हैं (matrix multiplication जैसा):

/* ऊपर उठाना और बड़ा करना एक साथ */

transform: translateY(-8px) scale(1.04);

/* icon hover: rotate और pop */

transform: rotate(15deg) scale(1.15);

/* ⚠️ Order important! पहले rotate, फिर translate — उल्टा नहीं */

transform: rotate(45deg) translateX(100px);

⚙️ CSS Transition की बनावट — 4 हिस्से

transition shorthand में चार अलग values एक ही लाइन में pack होती हैं। हर एक को color-code से समझते हैं:

transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;

1. Propertytransform

वो exact CSS property जिसे animate करना है। all कभी मत लिखो। Comma से multiple लिख सकते हो: transform 0.2s ease, box-shadow 0.2s ease।

2. Duration (अवधि)0.3s

Animation कितना समय लेगा। UI के लिए sweet spot: 0.15s – 0.4s। 0.15s से कम = झटका लगता है। 0.5s से ज़्यादा = sluggish। s (second) या ms में लिख सकते हो।

3. Timing Function (Speed Curve)cubic-bezier(...)

Speed कैसे बदलेगी — यह speed curve है। ease (default), linear (robot जैसा), ease-in (slow start), ease-out (slow end), या custom cubic-bezier()।

4. Delay (देरी)0.05s

Trigger होने के बाद शुरू होने से पहले कितना इंतज़ार करना है। Staggered menu items के लिए: पहले item को 0s, दूसरे को 0.05s, तीसरे को 0.1s... waterfall cascade effect बनता है।

Timing Functions की तुलना — Speed Curve Cheat Sheet

ease

प्राकृतिक deceleration। ज़्यादातर UI interactions के लिए best।

linear

पूरे time एकसमान speed। Progress bar, clock hands, rotating spinners के लिए।

ease-in

Screen से exit होने वाले elements के लिए — momentum gain करते हुए।

ease-out

Screen में enter होने वाले elements के लिए — सबसे natural लगता है।

cubic-bezier(0.34, 1.56, 0.64, 1)

Y value 1.56 > 1.0 होने से element target को overshoot करता है और वापस आता है। यही iPhone spring animation है — physical और organic।

📍 transform-origin: छुपा हुआ Anchor Point

हर scale() और rotate() को एक center point चाहिए जिसके चारों तरफ spin या grow हो। Default यह element का बिल्कुल center (50% 50%) है। transform-origin बदलने से visual behavior पूरी तरह बदल जाता है:

transform-origin: center;

Default। Middle से बाहर rotate/scale होता है — घड़ी के पहिए जैसा जो अपने center axle पर घूमता है। ज़्यादातर UI hover effects के लिए।

transform-origin: top left;

Top-left corner से pivot — दरवाज़े के hinge जैसा। Dropdown menus के लिए जो corner से "unfold" होते हैं।

transform-origin: bottom center;

Bottom से ऊपर grow करता है — ज़मीन से उगते पौधे जैसा। Tooltip popups जो anchor button से expand होते हैं।

/* Dropdown menu — top-left corner से unfold होता है */

.dropdown-menu {

transform-origin: top left;

transform: scale(0); /* बंद state */

transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.dropdown-menu.open { transform: scale(1); } /* खुला state */

💻 लाइव Transitions और 60fps Transforms एडिटर

नीचे cards पर mouse hover करके translateY + scale spring animation और icon rotate देखें। Button को click और hold करके :active scale(0.97) press micro-interaction feel करें। Duration और cubic-bezier values बदलकर देखें!

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Transitions & Transforms Masterclass</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #f8fafc;
      padding: 30px 16px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
    }

.interactive-stage {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 600px;
    }

/* 1. Lift Card with translateY + scale */
    .motion-card {
      width: 170px;
      height: 140px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      /* 60fps GPU Hardware Accelerated Transition */
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

.motion-card:hover {
      /* Lift up and pop forward with bouncy cubic-bezier */
      transform: translateY(-8px) scale(1.04);
      border-color: #6366f1;
      box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.35);
    }

.card-icon {
      font-size: 30px;
      /* Rotate transition */
      transition: transform 0.4s ease;
    }

.motion-card:hover .card-icon {
      transform: rotate(15deg) scale(1.15);
    }

.card-title {
      font-size: 13px;
      font-weight: 700;
      color: #e2e8f0;
    }

.card-subtitle {
      font-size: 11px;
      color: #94a3b8;
    }

/* 2. Interactive CTA Button */
    .glow-button {
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: #ffffff;
      padding: 14px 32px;
      font-size: 14px;
      font-weight: 700;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

.glow-button:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 24px rgba(124, 58, 237, 0.6);
    }

.glow-button:active {
      transform: scale(0.97);
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <h2 style="font-size: 22px; font-weight: 800; margin-bottom: 6px;">Hover Over The Cards Below</h2>
    <p style="font-size: 13px; color: #94a3b8;">Notice the buttery 60fps spring motion powered by GPU transforms</p>
  </div>

<div class="interactive-stage">
    <div class="motion-card">
      <div class="card-icon">🚀</div>
      <div class="card-title">Translate & Scale</div>
      <div class="card-subtitle">translateY(-8px)</div>
    </div>

<div class="motion-card">
      <div class="card-icon">✨</div>
      <div class="card-title">Spring Easing</div>
      <div class="card-subtitle">cubic-bezier bounce</div>
    </div>

<div class="motion-card">
      <div class="card-icon">🎯</div>
      <div class="card-title">Icon Spin</div>
      <div class="card-subtitle">rotate(15deg)</div>
    </div>
  </div>

<button class="glow-button">Interactive Button (Click & Hold!)</button>
</body>
</html>

Click & type to editHTML5

Browser Preview

Code का एक-एक लाइन विश्लेषण

Playground के सबसे important lines को समझते हैं:

transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;

एक ही line में दो transitions — comma से अलग। transform को springy cubic-bezier curve मिली (bouncy overshoot)। box-shadow को plain ease — shadows को bounce की ज़रूरत नहीं। Notice: all नहीं — सिर्फ exact properties।

cubic-bezier(0.34, 1.56, 0.64, 1)

चारों numbers Bézier curve के control points हैं: (x1, y1, x2, y2)। Key insight: Y value 1.56 > 1.0 है। CSS spec normally 0 से 1 के बीच clamp करती है, लेकिन cubic-bezier() इससे बाहर जा सकता है — element अपनी destination से आगे overshoot करता है और वापस आता है। यही iPhone spring physics है।

.motion-card:hover { transform: translateY(-8px) scale(1.04); border-color: #6366f1; }

दो transforms एक साथ: पहले card को 8px ऊपर उठाओ (translateY), फिर 4% बड़ा करो (scale)। यह combination Stripe और Linear जैसा premium "card floating off surface" effect देता है। border-color भी transition होता है क्योंकि वह base .motion-card transition rule में था।

.glow-button:active { transform: scale(0.97); }

Micro-interaction polish: जब user physically click/tap करता है, button अपने size का 97% हो जाता है — जैसे असली keyboard key दबाई जा रही हो। Mouse छोड़ते ही transition उसे वापस spring करती है। यह छोटा 3% difference button को mechanical और real बनाता है।

🧠 अपनी समझ परखें: Transitions और Transforms

Q1कार्ड पर माउस ले जाने पर उसे ऊपर उठाने के लिए `top: -10px;` के बजाय `transform: translateY(-10px);` का इस्तेमाल करना बेहतर क्यों है?

Q2`transition: transform 0.3s ease 0.1s;` में यह चौथा मान `0.1s` क्या तय करता है?

Q3प्रोडक्शन वेबसाइटों पर `transition: all 0.3s ease;` लिखना खराब कोडिंग क्यों माना जाता है?

🛠️

खुद ट्राई करो: 4-Level Interaction System

ऊपर के live editor में ये 4 experiments order में करो — हर एक अगले पर build करता है:

पूरा 360° spin: .motion-card:hover .card-icon में rotate(15deg) को rotate(360deg) करो। Cards पर hover करके rocket emoji का पूरा victory spin देखो!
Easing बदलो: .motion-card में cubic-bezier(0.34, 1.56, 0.64, 1) को linear करो। Cards hover करो — bounce गायब हो गया और motion robotic लगने लगा?
Stagger delay जोड़ो: एक और motion-card copy करो। दूसरे को inline style से transition-delay: 0.05s दो। अब दोनों cards animate होते हैं — दूसरा 50ms बाद, ripple waterfall effect बनता है।
Bonus — 3D card flip: .interactive-stage में perspective: 600px; जोड़ो। फिर .motion-card:hover में transform: rotateY(180deg); करो। Cards 3D flip करेंगे!

💡 पूरा solution देखने के लिए क्लिक करें

/* पूरा spin */

.motion-card:hover .card-icon {

transform: rotate(360deg) scale(1.3);

}

/* Stagger — 2nd card पर */

/* 3D flip */

.interactive-stage { perspective: 600px; }

.motion-card:hover { transform: rotateY(180deg); }

आम गलतियाँ और इंटरव्यू के सवाल

❌ गलती 1: Transition को :hover के अंदर लिखना

.card:hover { transition: transform 0.3s; } लिखने पर hover-in smooth होता है, लेकिन mouse हटाने पर card बिना animation के झटके से वापस जाता है! Transition हमेशा base selector (.card) पर होना चाहिए, :hover पर नहीं।

❌ गलती 2: `transition: all` लिखना

transition: all ब्राउज़र को हर CSS property monitor करने पर मजबूर करता है — padding, margin, font-size सब। कोई भी accidental change animate होगी। Mobile battery तेज़ी से खत्म, frame drop। हमेशा specific लिखो: transition: transform 0.2s ease, box-shadow 0.2s ease;

✅ Best Practice: `will-change` का अग्रिम संकेत

Heavy animations के लिए will-change: transform; add करो। ब्राउज़र पहले से GPU layer allocate कर लेता है जिससे पहली interaction पर कोई stutter नहीं। Overuse मत करो — हर will-change GPU memory खाती है।

✅ Accessibility: `prefers-reduced-motion`

कुछ users को vestibular disorders हैं — animations से चक्कर आते हैं। हमेशा यह media query add करो: @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }। WCAG accessibility guidelines की यह requirement है।

💬 इंटरव्यू प्रश्न: कौन सी दो CSS properties GPU पर 60fps में animate होती हैं?

transform और opacity। ये दोनों ही GPU compositor thread पर चलती हैं बिना Layout (Reflow) या Paint trigger किए।

बाकी सब:

✅ Compositor-safe: transform, opacity
⚠️ Paint stage: color, background-color, box-shadow, border-radius
❌ Full pipeline: top, left, width, height, margin, padding

💬 इंटरव्यू प्रश्न: `transform-origin` क्या होता है और क्यों ज़रूरी है?

transform-origin वह anchor point है जिसके चारों तरफ rotate() और scale() apply होते हैं। Default 50% 50% (center) है।

transform-origin: top left; → दरवाज़े के hinge जैसा खुलता है (dropdown menu)
transform-origin: bottom center; → नीचे से ऊपर grow करता है (tooltip popup)
transform-origin: 0 0; → pixel coordinates में same as top left

💬 इंटरव्यू प्रश्न: CSS `transition` और `animation` में क्या फ़र्क है?

CSS Transition: ठीक दो states के बीच animate करता है और trigger की ज़रूरत होती है। Loop नहीं कर सकता, intermediate steps नहीं।

CSS Animation (@keyframes): Multiple intermediate steps (0%, 50%, 100%) define करता है। अपने आप चल सकता है, infinite loop, reverse play।

transition के लिए: hover cards, button press, dropdown, modal open/close।
animation के लिए: loading spinner, pulsing dot, hero entrance animation।

💬 इंटरव्यू प्रश्न: Parent पर `transition: transform 0.3s` देने पर children auto-animate क्यों नहीं होते?

CSS transitions सिर्फ उस exact element पर apply होती हैं जिस पर transition declare की गई है। transition inherit नहीं होता।

लेकिन जब parent transform: translateY(-8px) होता है, तो सभी children उसके साथ physically move करते हैं — वे एक ही GPU layer का हिस्सा हैं। बस वे independently animate नहीं होते जब तक उनकी खुद की transition न हो।

इसीलिए playground में .card-icon का खुद का rotation transition है, parent card के lift transition से अलग।

अगला लेसनAnimations & CSS Variables