CSS Animations

एक flipbook artist होने की कल्पना करें। आप sticky note drawings की एक series draw करते हैं: page एक पर, एक stick figure स्थिर खड़ा है। page दस पर, वह आगे एक step लेता है। page बीस पर, वह हवा में कूदता है। जब आप pages को तेज़ी से flip करते हैं, तो static drawings एक smooth, moving cartoon में merge हो जाती हैं। CSS animations वही digital flipbooks हैं। ये आपको custom visual states (जिन्हें @keyframes कहते हैं) की एक timeline define करने देते हैं और user interactions की ज़रूरत के बिना automatically elements को उन states के through animate करते हैं।

In this page:

@keyframes Timelines Declare करना
Custom Animations लागू करना
Iteration Counts को Control करना
Directions को Control करना
Fill Modes Manage करना (animation-fill-mode)

Syntax

css

@keyframes animation-name {
  from { property: value; }
  to { property: value; }
}
selector {
  animation: animation-name duration timing-function iteration-count;
}

@keyframes Timelines Declare करना

@keyframes rule आपकी animation की states और timeline define करने के लिए इस्तेमाल होता है। आप percentage indicators (0% से 100% तक) या simple keyword hooks (from और to) इस्तेमाल करके keyframes specify करते हैं ताकि यह define हो कि अलग-अलग moments पर कौन-सी CSS properties बदलती हैं।

Note:

complex, multi-state animations बनाने के लिए अपने keyframes में percentage indicators इस्तेमाल करें।
Accepted values:
animation-name — एक @keyframes rule का नाम
animation-duration — time जैसे 2s या 500ms
animation-timing-function — ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
animation-iteration-count — number | infinite
animation-direction — normal | reverse | alternate | alternate-reverse
animation-fill-mode — none | forwards | backwards | both

Warning: animation conflicts रोकने के लिए सुनिश्चित करें कि आप अपनी keyframe timeline को एक descriptive, unique नाम दें।

उदाहरण: Declaring @keyframes Timelines

css

<style>
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.box {
  background: teal;
  color: white;
  padding: 10px;
  animation: fade 2s;
}
</style>
<div class="box">Fades in using the keyframes above</div>

Custom Animations लागू करना

एक बार जब आप अपनी keyframe timeline declare कर लें, तो आप इसे animation-name और animation-duration properties इस्तेमाल करके किसी element पर लागू करते हैं। यह browser को तुरंत आपकी custom animation timeline चलाने का instruction देता है।

animation-name और animation-duration के साथ animation-timing-function: ease-in-out जैसा timing function जोड़ना motion की pacing control करता है, इसे constant linear speed से चलने के बजाय ease in और out करते हुए।

Note:

हमेशा एक defined duration value specify करें, वरना आपकी animation default रूप से 0 हो जाएगी और चलने में fail हो जाएगी।
Accepted values:
animation-name: <keyframes-name> — इस्तेमाल होने वाला @keyframes rule
animation-duration: <time> — एक cycle की length
animation-timing-function: ease | linear | cubic-bezier() — pacing
animation-delay: <time> — शुरू होने से पहले wait
animation: name 2s ease 0s — shorthand

Warning: page load पर भारी animations चलाते समय सावधान रहें, क्योंकि वे mobile devices पर performance धीमी कर सकती हैं।

उदाहरण: Applying custom Animations

css

<style>
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box {
  background: teal;
  color: white;
  padding: 10px;
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
</style>
<div class="box">Fades in on load</div>

Iteration Counts को Control करना

Default रूप से, animations exactly एक बार चलते हैं और फिर रुक जाते हैं। animation-iteration-count property आपको यह specify करने देती है कि आप animation को कितनी बार repeat करना चाहते हैं, या इसे हमेशा के लिए loop करने के लिए infinite set करें।

animation-play-state property आपको किसी भी point पर एक animation को pause और resume करने देती है, सबसे common रूप से :hover पर paused toggle की जाती है ताकि user किसी looping animation को inspect करने के लिए freeze कर सके।

Note:

उन्हें लगातार spinning रखने के लिए subtle loading spinners पर infinite loops इस्तेमाल करें।
Accepted values:
animation-iteration-count: 1 — default, एक बार चलता है
animation-iteration-count: <number> — उतनी बार चलता है (decimals allowed हैं)
animation-iteration-count: infinite — हमेशा के लिए loop करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: तेज़, flashing animations को loop करना distracting हो सकता है और इससे बचना चाहिए।

उदाहरण: Controlling Iteration Counts

css

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  background: coral;
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 1s infinite;
}
.spinner:hover {
  animation-play-state: paused;
}
</style>
<div class="spinner">Spins forever, hover to pause</div>

Directions को Control करना

animation-direction property specify करती है कि आपकी animation timeline कैसे play होनी चाहिए, normal, reverse (backward चलता है), alternate (forward फिर backward चलता है), और alternate-reverse options देते हुए।

Note:

smooth, natural-looking back-and-forth animations बनाने के लिए alternate direction setting इस्तेमाल करें।
Accepted values:
normal — default, हर cycle forwards
reverse — हर cycle backwards
alternate — forwards फिर backwards
alternate-reverse — backwards फिर forwards
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: यह सुनिश्चित करने के लिए कि start और end states बिना jarring snaps के smoothly transition हों, अपने alternate loops test करें।

उदाहरण: Controlling Directions

css

<style>
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(50px); }
}
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  animation: slide 1s alternate infinite;
}
</style>
<div class="box">Plays forward, then backward, then forward again</div>

Fill Modes Manage करना (animation-fill-mode)

Default रूप से, जब कोई animation चलना खत्म कर देती है, तो element instantly अपनी original pre-animated styles पर वापस snap हो जाता है। animation-fill-mode property आपको browser को animation की start या end styles को उसके चलने के बाद permanently लागू करने का instruction देने देती है।

Note:

अपनी fill-mode को forwards set करें ताकि आपके elements animation खत्म होने के बाद अपनी final animated styles बनाए रखें।
Accepted values:
none — default, animation के बाहर कोई styles लागू नहीं
forwards — end के बाद आख़िरी keyframe रखता है
backwards — delay के दौरान पहली keyframe लागू करता है
both — दोनों behaviors लागू करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: fill modes को manage न करना elements को उनकी animations खत्म होने पर awkwardly वापस snap करा सकता है।

उदाहरण: Managing Fill Modes (animation-fill-mode)

css

<style>
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  animation: slideIn 1s forwards;
}
</style>
<div class="box">Keeps its final position after the animation ends</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Transitions Next Lesson → CSS Image Styling

CSS Animations

@keyframes Timelines Declare करना

Custom Animations लागू करना

Iteration Counts को Control करना

Directions को Control करना

Fill Modes Manage करना (animation-fill-mode)

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code