✨ Days 13–18 – Motion, UI और Professional CSS · दिन 14

दिन 14: Keyframe Animations

⏱ 90 min📶 Intermediate🎯 100% self-study

दिन 14 / 20

✅ आज आप सीखेंगे

from/to और percentages के साथ @keyframes
animation-name, duration, timing, delay, iteration-count, direction, fill-mode
Loaders: spinner, dots और skeleton screens
ध्यान खींचने वाले effects: pulse, shake, marquee offer strip
Staggered entrances और prefers-reduced-motion का सम्मान

🏢 असली दुनिया में

धीमे 4G पर data load होते समय users ख़ाली screen देखते हैं और सोचते हैं app टूटा है। Swiggy और Flipkart जैसे apps इसकी जगह grey “skeleton” boxes और spinners दिखाते हैं – तेज़ लगता है जबकि होता नहीं। आज आप वे loaders और marketing teams के हमेशा माँगे जाने वाले त्योहारी effects बनाएँगे।

@keyframes + animation

HTML + CSS

<style>
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(245 158 11 / 60%); }
  50%      { box-shadow: 0 0 0 14px rgb(245 158 11 / 0%); }
}
.banner { background: #264de4; color: #fff; padding: 12px 16px; border-radius: 10px;
  animation: slide-in .7s ease-out both; }
.offer { display: inline-block; margin-top: 16px; background: #f59e0b; padding: 8px 14px; border-radius: 99px; font-weight: 700;
  animation: glow 1.8s ease-in-out infinite; }
</style>

<div class="banner">Welcome to Sharma Sweets 🍬</div>
<span class="offer">🪔 Diwali offer – 10% off</span>
<p><button onclick="var b=document.querySelector('.banner'); b.style.animation='none'; b.offsetWidth; b.style.animation='';">Replay</button></p>

▶ A one-time slide-in and an infinite glow

Property	उदाहरण	मतलब
animation-name	slide-in	कौन सा @keyframes
animation-duration	.7s	एक चक्र
animation-timing-function	ease-out, steps(4)	गति वक्र
animation-delay	.2s	बाद में शुरू
animation-iteration-count	1, 3, infinite	कितनी बार
animation-direction	alternate	आगे फिर पीछे
animation-fill-mode	both / forwards	पहला/आख़िरी frame पहले/बाद में रखना
animation-play-state	paused	रोकना, जैसे hover पर

Loaders और skeleton screens

HTML + CSS

<style>
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner { width: 40px; height: 40px; border: 4px solid #dbeafe; border-top-color: #264de4; border-radius: 50%; animation: spin .8s linear infinite; }
.dots span { display: inline-block; width: 12px; height: 12px; margin: 0 3px; background: #264de4; border-radius: 50%; animation: bounce 1.2s infinite ease-in-out both; }
.dots span:nth-child(1) { animation-delay: -.32s; }
.dots span:nth-child(2) { animation-delay: -.16s; }

.sk { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
.sk-card { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.sk-img { width: 70px; height: 70px; }
.sk-line { height: 12px; margin: 8px 0; }
.row { display: flex; gap: 40px; align-items: center; }
</style>

<div class="row">
  <div class="spinner" role="status" aria-label="Loading"></div>
  <div class="dots" aria-hidden="true"><span></span><span></span><span></span></div>
</div>
<div class="sk-card" aria-busy="true">
  <div class="sk sk-img"></div>
  <div style="flex:1"><div class="sk sk-line" style="width:70%"></div><div class="sk sk-line" style="width:45%"></div></div>
</div>

▶ Spinner, bouncing dots and a shimmering skeleton card

🧠 Accessible loaders

Spinners को role="status" और aria-label (या छिपा text “Loading…”) दें, और load हो रहे हिस्से पर aria-busy="true" रखें ताकि screen-reader users को पता चले कुछ हो रहा है।

बिकने वाले attention effects

HTML + CSS

<style>
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-15deg); } 20%, 40% { transform: rotate(15deg); } 50% { transform: rotate(0); } }

.error { border: 2px solid #dc2626; padding: 8px; border-radius: 8px; width: 220px; animation: shake .5s; }
.strip { overflow: hidden; background: #111827; color: #fde68a; border-radius: 8px; margin: 14px 0; }
.strip .track { display: flex; width: max-content; animation: marquee 12s linear infinite; }
.strip span { padding: 8px 24px; white-space: nowrap; }
.strip:hover .track { animation-play-state: paused; }
.bell { display: inline-block; font-size: 28px; animation: ring 2s ease-in-out infinite; transform-origin: top center; }
</style>

<input class="error" value="98290" aria-invalid="true"> <small style="color:#dc2626">Enter 10 digits</small>
<div class="strip"><div class="track">
  <span>🪔 Diwali gift boxes from ₹480</span><span>🚚 Free delivery above ₹1,500</span><span>🍬 Sugar-free kaju katli launched</span>
  <span aria-hidden="true">🪔 Diwali gift boxes from ₹480</span><span aria-hidden="true">🚚 Free delivery above ₹1,500</span><span aria-hidden="true">🍬 Sugar-free kaju katli launched</span>
</div></div>
<span class="bell" aria-hidden="true">🔔</span> 3 new orders

▶ Shake for errors, an offer marquee (pauses on hover) and a ringing bell

एक-एक करके entrance

HTML + CSS

<style>
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.list li { list-style: none; background: #eef2ff; margin: 6px 0; padding: 10px 14px; border-radius: 8px;
  animation: rise .5s ease-out both;
  animation-delay: calc(var(--i) * 120ms); }   /* each item waits a bit longer */
</style>

<ul class="list" style="padding:0">
  <li style="--i:0">✔ Order received</li>
  <li style="--i:1">✔ Sweets packed</li>
  <li style="--i:2">✔ Out for delivery</li>
  <li style="--i:3">✔ Delivered</li>
</ul>

▶ CSS variables + calc() for a cascading entrance

prefers-reduced-motion का सम्मान

CSS – include this in every project

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

⚠️ क्यों ज़रूरी

Vestibular समस्याओं वाले लोगों को बड़े हिलते elements से चक्कर या मितली हो सकती है। Phones और computers में “reduce motion” setting होती है; यह snippet उसका सम्मान करता है। यह !important के दुर्लभ सही उपयोगों में से एक है।

🏅 आज के Job Skills

✔ @keyframes लिखना और animations configure करना✔ Spinners, dots और skeleton loaders✔ Shake, marquee और stagger effects✔ Reduced motion चाहने वाले users का support

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: Chat app के लिए “typing” indicator बनाएँ (तीन dots एक के बाद एक fade in-out)।

Solution देखें

▶ Result

Task 2: 4 cards (image, title line, price line) वाले product grid का skeleton screen बनाएँ।

Task 3: forwards fill-mode से page load पर progress bar को एक बार 0% से 75% तक animate करें।

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. Animation हमेशा दोहराएँ:

या shorthand में infinite।

2. Animation ख़त्म होने के बाद आख़िरी keyframe रखें:

animation-fill-mode।

3. Skeleton screen का उद्देश्य…

अनुभव की गई गति।

4. Hover पर marquee रोकें:

Mouse हटने पर फिर चलता है।

5. Motion से चक्कर वाले users की सुरक्षा…

OS accessibility setting।

Interview corner

💼 Interview Corner

Loading तेज़ कैसे महसूस कराएँ?

Final layout जैसे skeleton screens दिखाएँ, छोटे इंतज़ार के लिए हल्के CSS spinners, content धीरे-धीरे load, layout shifts से बचने को जगह रखें, और accessible status messages दें।

animation-fill-mode क्या है?

यह तय करता है animation शुरू होने से पहले (backwards – delay के दौरान पहला keyframe) और ख़त्म होने के बाद (forwards – आख़िरी keyframe रहता है) कौन सी styles लगें। both दोनों करता है।

सारांश

@keyframes steps तय करता है; animation उन्हें लगाता है।
Spinners के लिए infinite + linear; frames रखने को both/forwards।
Skeletons और spinners अनुभव की गति सुधारते हैं।
prefers-reduced-motion snippet हमेशा जोड़ें।

➡️ आगे

Day 15: forms और tables की styling – inputs, custom checkboxes, validation states और responsive tables।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

CSS animation या JavaScript animation?

UI effects, loaders और entrances के लिए CSS – आसान और तेज़। Scroll-linked, physics या user input पर निर्भर timelines के लिए JavaScript (या libraries)।

क्या element scroll में दिखने पर animation चला सकते हैं?

हाँ – JavaScript के IntersectionObserver से class जोड़ें (JS course), या जहाँ support हो वहाँ नया CSS animation-timeline: view() लें।

← CSS (20 Days)

दिन 14: Keyframe Animations

✅ आज आप सीखेंगे

🏢 असली दुनिया में

@keyframes + animation

Loaders और skeleton screens

बिकने वाले attention effects

एक-एक करके entrance

prefers-reduced-motion का सम्मान

🏅 आज के Job Skills

Practice tasks

🏋️ Practice – ख़ुद करें

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

Interview corner

💼 Interview Corner

सारांश

अक्सर पूछे जाने वाले प्रश्न (FAQ)

यह lesson कैसा लगा?

पढ़ने वालों के reviews

Video से सीखें – आसान Hindi में