✨ Days 13–18 – Motion, UI और Professional CSS · दिन 13
दिन 13: Transitions और Transforms
⏱ 85 min📶 Intermediate🎯 100% self-study
दिन 13 / 20
✅ आज आप सीखेंगे
- transition: property, duration, timing function, delay
- कौन सी properties animate करें (और कौन सी नहीं)
- transform: translate, scale, rotate, skew; transform-origin
- Hover effects: cards उठाना, images zoom, underline slide
- perspective और backface-visibility से 3D flip card
🏢 असली दुनिया में
Clients अक्सर कहते हैं “premium feel दो” बिना जाने इसका मतलब क्या है। ज़्यादातर इसका मतलब micro-interactions है: प्रतिक्रिया देता button, हल्का उठता card, धीरे zoom होती photo। सही हों तो 0.2 सेकंड और CSS की 3 lines; ग़लत हों तो site धीमी और झटकेदार लगती है।
transition: A से B तक smoothly
HTML + CSS
<style>
.btn { background: #264de4; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; font-size: 1rem; margin: 4px; cursor: pointer; }
.no-anim:hover { background: #0f766e; }
.anim {
transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.anim:hover {
background: #0f766e;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
.anim:active { transform: translateY(0); }
</style>
<button class="btn no-anim">No transition</button>
<button class="btn anim">With transition</button>| हिस्सा | उदाहरण | मतलब |
|---|---|---|
| property | transform | क्या animate करें (“all” से बचें) |
| duration | .25s / 250ms | UI feedback: 150–300ms; बड़ी हलचल: 300–500ms |
| timing-function | ease, ease-out, linear, cubic-bezier() | गति वक्र; अंदर आती चीज़ों के लिए ease-out स्वाभाविक |
| delay | .1s | शुरू से पहले रुकना – एक-एक कर चलाने के लिए |
HTML + CSS
<style>
.track { background: #f1f5f9; border-radius: 8px; margin: 6px 0; padding: 4px; }
.dot { width: 34px; height: 34px; border-radius: 50%; background: #264de4; transition: transform 1.2s; }
.track:hover .dot { transform: translateX(260px); }
.linear { transition-timing-function: linear; }
.ease { transition-timing-function: ease; }
.easeout { transition-timing-function: ease-out; }
.bounce { transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55); background: #f59e0b; }
</style>
<p style="font:13px system-ui">Hover the grey area – compare the speed curves</p>
<div class="track"><div class="dot linear"></div></div>
<div class="track"><div class="dot ease"></div></div>
<div class="track"><div class="dot easeout"></div></div>
<div class="track"><div class="dot bounce"></div></div>transform: खिसकाना, बड़ा करना, घुमाना, तिरछा
HTML + CSS
<style>
.t { display: inline-grid; place-items: center; width: 90px; height: 90px; margin: 18px; background: #264de4; color: #fff; border-radius: 10px; font: 600 12px system-ui; }
.t1 { transform: translate(20px, -10px); }
.t2 { transform: scale(1.2); }
.t3 { transform: rotate(15deg); }
.t4 { transform: skewX(-12deg); }
.t5 { transform: rotate(45deg); transform-origin: top left; background: #c2410c; }
</style>
<div class="t t1">translate</div><div class="t t2">scale 1.2</div><div class="t t3">rotate 15°</div><div class="t t4">skewX</div><div class="t t5">origin: top left</div>💡 सिर्फ़ transform और opacity animate करें
width, height, top, left या margin बदलने पर browser हर frame पर layout दोबारा गिनता है – सस्ते phones पर झटके। transform और opacity GPU संभालता है और 60fps पर रहते हैं।
असली hover effects
HTML + CSS
<style>
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgb(0 0 0 / 8%); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgb(0 0 0 / 14%); }
.card .img { overflow: hidden; }
.card img { display: block; width: 100%; transition: transform .5s ease; }
.card:hover img { transform: scale(1.08); }
.card p { margin: 0; padding: 10px 12px; font-weight: 600; }
.link { position: relative; color: #264de4; text-decoration: none; font-weight: 600; }
.link::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.link:hover::after { transform: scaleX(1); }
</style>
<div class="grid">
<div class="card"><div class="img"><img src="images/kaju-katli-400.webp" alt="Kaju katli"></div><p>Kaju Katli</p></div>
<div class="card"><div class="img"><img src="images/ghewar-400.webp" alt="Ghewar"></div><p>Ghewar</p></div>
<div class="card"><div class="img"><img src="images/rasmalai-400.webp" alt="Rasmalai"></div><p>Rasmalai</p></div>
</div>
<p style="margin-top:16px">Read our <a class="link" href="#">ghewar recipe story</a> – hover me.</p>3D flip card
HTML + CSS
<style>
.flip { width: 220px; height: 150px; perspective: 800px; display: inline-block; margin: 6px; }
.inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.flip:hover .inner, .flip:focus-within .inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 14px; display: grid; place-items: center; text-align: center; padding: 12px; backface-visibility: hidden; font: 600 15px system-ui; }
.front { background: linear-gradient(135deg, #264de4, #06b6d4); color: #fff; }
.back { background: #fff7ed; border: 2px solid #f59e0b; transform: rotateY(180deg); }
</style>
<div class="flip" tabindex="0"><div class="inner">
<div class="face front">Q: Which two properties animate smoothest?</div>
<div class="face back">transform and opacity ✅</div>
</div></div>
<div class="flip" tabindex="0"><div class="inner">
<div class="face front">Rasmalai 🍮</div>
<div class="face back">Paneer discs in kesar milk · ₹700/kg</div>
</div></div>| 3D property | काम |
|---|---|
| perspective (parent पर) | देखने वाले की दूरी – छोटा = ज़्यादा 3D |
| transform-style: preserve-3d | Children अपनी 3D जगह रखें |
| backface-visibility: hidden | घूमते समय हर face का पिछला हिस्सा छिपाएँ |
| rotateY(180deg) | Vertical axis पर घुमाना |
⚠️ Phones पर hover नहीं होता
ज़रूरी जानकारी सिर्फ़ hover के पीछे कभी न छिपाएँ। :focus-within (keyboard) जोड़ें और effect सजावटी रखें, या hover styles को @media (hover: hover) में रखें।
🏅 आज के Job Skills
✔ सही timing वाली smooth transitions✔ transform से elements खिसकाना, बड़ा करना, घुमाना✔ Lift, zoom और underline hover effects✔ Accessible 3D flip card
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: “Add to cart” button बनाएँ जो hover पर 5% बढ़े और गहरा हो, और दबाने पर थोड़ा छोटा हो।
Solution देखें
Task 2: ऐसा image card बनाएँ जिसमें hover पर गहरा caption नीचे से ऊपर खिसके (translateY)।
Task 3: Flip-card तकनीक से CSS terms (flex, grid, rem, clamp) के 4 flashcards बनाएँ।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Performance के लिए animate करने की सबसे अच्छी properties:
Composited, layout नहीं।
2. transition कहाँ लिखें?
ताकि दोनों ओर animate हो।
3. Button hover feedback की अच्छी अवधि?
150–300ms।
4. transform-origin बदलता है…
Default केंद्र है।
5. Flip के समय पिछला face छिपाएँ:
3D property।
Interview corner
💼 Interview Corner
left/top की जगह transform animate करना तेज़ क्यों?
left/top layout बदलते हैं, तो browser को हर frame पर layout दोबारा गिनकर repaint करना पड़ता है। transform (और opacity) बिना layout या paint के compositor/GPU layer पर लगते हैं, जिससे smooth 60fps animations मिलती हैं।
Transition बनाम animation?
Transition किसी property के बदलने पर (जैसे hover) दो states के बीच बदलाव करता है। Keyframe animation अपने-आप तय steps का क्रम चलाता है, loop हो सकता है, और उसे state बदलाव की ज़रूरत नहीं।
सारांश
- Base state पर transition: property duration easing delay।
- Smooth 60fps के लिए transform और opacity animate करें।
- translate / scale / rotate / skew + transform-origin।
- Hover effects focus के साथ भी चलें और ज़रूरी जानकारी न छिपाएँ।
➡️ आगे
Day 14: @keyframes animations – loaders, attention pulses, scroll reveals और reduced-motion support।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
मेरी transition क्यों नहीं चलती?
आम कारण: transition सिर्फ़ :hover पर, “auto” से/तक animate (height: auto transition नहीं होता), या property नाम में typo।
क्या हर element animate हो?
नहीं। Motion feedback देने और ध्यान खींचने के लिए – buttons, cards, menus। बहुत ज़्यादा motion सस्ता लगता है और भटकाता है।
