पाठ 29, कुल 30 में

CSS Transitions और Animations

5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS Responsive — हर screen पर अच्छा पेज CSS Variables — नाम देकर value सहेजो

एक button जो grey से हरे रंग में झटके से बदल जाए, वह बेजान लगता है। वही button जो एक चौथाई सेकंड में धीरे-धीरे हरा हो जाए, वह ज़िंदा लगता है। वह चिकनाई transition है। और अपने आप उछलने वाली गेंद, या पेज खुलते ही अंदर सरकने वाला कार्ड, animation है। दोनों शुद्ध CSS हैं — JavaScript की बिल्कुल ज़रूरत नहीं।

Diagram — देखें, यह सब कैसे जुड़ता है

फर्क आसान है: transition दो स्थितियों के बीच का smooth बदलाव है, जैसे normal और hover। Animation अपने आप चलने वाले कदमों का समूह है, जैसे उछलना या घूमना, और वह हमेशा दोहराया जा सकता है।

Transitions — hover पर smooth बदलाव

Transition के लिए दो चीज़ें चाहिए: एक शुरुआती style, :hover पर एक अलग style, और transition property जो browser को छलाँग की बजाय धीरे-धीरे बदलने के लिए कहती है। आप बताते हैं कि कौन सी property बदलती है और उसमें कितना समय लगता है — transition: background-color 0.3s का मतलब है "जब background रंग बदले, तो वहाँ पहुँचने में 0.3 सेकंड लो"।

Syntax — hover पर बड़ा होने वाला button

.btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px 24px;
  transition: background-color 0.3s, transform 0.3s;
}
.btn:hover {
  background-color: #038857;
  transform: scale(1.1);
}

जब mouse button के ऊपर आता है, तो उसका रंग गहरा होता है और वह 10% बड़ा हो जाता है — दोनों बदलाव 0.3 सेकंड में धीरे-धीरे होते हैं। Mouse के हटते ही button धीरे-धीरे वापस आ जाता है। आप एक ही transition में commas से कई properties लिख सकते हैं।

Animations — @keyframes से चलती फिल्म

Animation CSS में लिखी एक छोटी फिल्म है। @keyframes नियम कदम बताता है: element शुरुआत में कैसा दिखता है (from या 0%), बीच में कैसा, और आखिर में कैसा (to या 100%)। फिर element को बताया जाता है कि कौन सी animation चलानी है, कितनी देर तक, और कितनी बार दोहरानी है।

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}
.ball {
  animation: bounce 1s infinite;
}

गेंद बीच के पल में 40 pixels ऊपर उठती है और आखिर में फिर ज़मीन पर आ जाती है, और infinite से वह हमेशा उछलती रहती है। infinite की जगह 3 जैसा number लिख दें, तो वह ठीक तीन बार उछलेगी।

Note: transform (scale, translate, rotate) और opacity animate करने के लिए सबसे smooth properties हैं, क्योंकि browser पूरे पेज का लेआउट दोबारा गिने बिना उन्हें हिला सकता है। width, height या margin को animate करना भी काम करता है, लेकिन धीमे phones पर वह झटकेदार लग सकता है।

Tip: Animations को छोटा और हल्का रखें — hover के लिए 0.3 सेकंड, उछलने के लिए 1 सेकंड। लंबी, चमकीली animations visitors को परेशान करती हैं और पेज धीमा लगने लगता है। और उन लोगों का ख्याल रखें जो कम movement पसंद करते हैं: @media (prefers-reduced-motion: reduce) वाला नियम उनके लिए animations बंद कर सकता है।

आम गलतियाँ

:hover वाला style लिखना लेकिन transition property भूल जाना — बदलाव धीरे-धीरे होने की बजाय तुरंत हो जाता है।
transition सिर्फ :hover वाले नियम पर लगाना — यह normal नियम पर होना चाहिए, ताकि mouse के आते और जाते, दोनों समय बदलाव धीरे-धीरे हो।
@keyframes का नाम और animation का नाम एक जैसा न रखना — spelling में फर्क हो तो कुछ भी नहीं हिलता।
साधारण hover effect के लिए width या margin को animate करना — transform: scale() वही काम कहीं ज़्यादा smooth तरीके से करता है।
Animations को बहुत लंबा बनाना या हर चीज़ को हमेशा दोहराना — movement आँख को रास्ता दिखाए, content से ध्यान न भटकाए।

याद रखें

Transition दो स्थितियों के बीच धीरे-धीरे बदलता है, जैसे normal और :hover।
transition: background-color 0.3s बताता है कि कौन सी property बदलती है और उसमें कितना समय लगता है।
transition को normal नियम पर लगाएँ, :hover पर नहीं।
@keyframes कदम बताता है; animation उन्हें चलाता है, एक समय और दोहराव की संख्या के साथ।
सबसे smooth movement के लिए transform और opacity को animate करें।

याद रखने की तरकीब: Transition = दो हालतों के बीच की चाल; Animation = अपने आप चलने वाली फिल्म।

उदाहरण समझिए

.btn { transition: background-color 0.3s, transform 0.3s; } — button को कहा गया है कि जब भी उसका रंग या size बदले, तो 0.3 सेकंड तक धीरे-धीरे बदले।
.btn:hover { transform: scale(1.1); } — hover पर button 10% बड़ा हो जाता है और गहरा हरा हो जाता है, झटके से नहीं, धीरे-धीरे।
@keyframes bounce — गेंद की छलाँग के तीन कदम: 0% पर ज़मीन पर, 50% पर 40 pixels ऊपर, और 100% पर फिर ज़मीन पर।
.ball { animation: bounce 1s infinite; } — गेंद bounce animation चलाती है, हर उछाल एक सेकंड की, हमेशा के लिए।
.card { animation: slide-in 0.8s; } — स्वागत वाला कार्ड पेज खुलते ही translateX से -100px से 0 तक, बाएँ से एक बार अंदर सरकता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Transitions and Animations</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; text-align: center; background-color: #f2f2f2; }
.card {
  background-color: white;
  max-width: 500px;
  margin: 0 auto 30px auto;
  padding: 25px;
  border-radius: 10px;
  animation: slide-in 0.8s;
}
@keyframes slide-in {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
.btn:hover { background-color: #038857; transform: scale(1.1); }
.ball {
  width: 60px;
  height: 60px;
  background-color: #ff5722;
  border-radius: 50%;
  margin: 40px auto;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}
</style>
</head>
<body>

<div class="card">
<h1>Welcome to CSS Animations</h1>
<p>This card slid in from the left when the page loaded.</p>
<button class="btn">Hover Over Me</button>
</div>

<div class="ball"></div>
<p>The ball bounces forever — pure CSS, no JavaScript.</p>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Transitions and Animations</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; text-align: center; background-color: #f2f2f2; }
.card {
  background-color: white;
  max-width: 500px;
  margin: 0 auto 30px auto;
  padding: 25px;
  border-radius: 10px;
  animation: slide-in 0.8s;
}
@keyframes slide-in {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
.btn:hover { background-color: #038857; transform: scale(1.1); }
.ball {
  width: 60px;
  height: 60px;
  background-color: #ff5722;
  border-radius: 50%;
  margin: 40px auto;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}
</style>
</head>
<body>

<div class="card">
<h1>Welcome to CSS Animations</h1>
<p>This card slid in from the left when the page loaded.</p>
<button class="btn">Hover Over Me</button>
</div>

<div class="ball"></div>
<p>The ball bounces forever — pure CSS, no JavaScript.</p>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।