CSS Animation और Transition संपूर्ण गाइड 2026

बटन होवर इफेक्ट्स, लोडिंग स्पिनर, पेज ट्रांज़िशन... मॉडर्न वेब डेवलपमेंट में एनिमेशन आवश्यक हैं।

सीखें कि कैसे सिर्फ CSS से, बिना JavaScript के, स्मूथ इंटरैक्शन बनाएं।

---

Transition vs Animation

---

CSS Transition

बेसिक सिंटैक्स

transition: property duration timing-function delay;

बेसिक उदाहरण

/* सिंगल प्रॉपर्टी */
.button {
  background: #3b82f6;
  transition: background 0.3s ease;
}

.button:hover {
  background: #2563eb;
}

/* मल्टीपल प्रॉपर्टीज़ */
.card {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

टाइमिंग फंक्शंस

/* बिल्ट-इन फंक्शंस */
.ease { transition-timing-function: ease; }         /* डिफ़ॉल्ट */
.linear { transition-timing-function: linear; }     /* कॉन्स्टेंट स्पीड */
.ease-in { transition-timing-function: ease-in; }   /* स्लो स्टार्ट */
.ease-out { transition-timing-function: ease-out; } /* स्लो एंड */
.ease-in-out { transition-timing-function: ease-in-out; }

/* कस्टम बेज़ियर कर्व */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* स्टेप्ड */
.steps { transition-timing-function: steps(4, end); }

पॉपुलर बेज़ियर कर्व्स

/* बाउंस */
.bounce { transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* स्मूथ */
.smooth { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* स्नैप */
.snap { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

---

CSS Animation

बेसिक सिंटैक्स

@keyframes animationName {
  from { /* स्टार्ट स्टेट */ }
  to { /* एंड स्टेट */ }
}

/* या */
@keyframes animationName {
  0% { /* स्टार्ट */ }
  50% { /* मिडल */ }
  100% { /* एंड */ }
}

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

Animation प्रॉपर्टीज़

---

प्रैक्टिकल एनिमेशन उदाहरण

1. फेड इन

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

/* ऊपर से फेड इन */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  animation: fadeInDown 0.5s ease forwards;
}

2. लोडिंग स्पिनर

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

3. पल्स इफेक्ट

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* पल्स रिंग */
@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  animation: pulseRing 1.5s ease-out infinite;
}

4. बाउंस

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.bounce {
  animation: bounce 1s infinite;
}

5. शेक (एरर)

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* JavaScript से ट्रिगर करें */
/* element.classList.add('shake'); */

6. टाइपिंग इफेक्ट

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

.typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  width: 0;
  animation:
    typing 3s steps(30) forwards,
    blink 0.7s step-end infinite;
}

7. स्केलेटन लोडिंग

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

---

Transform के साथ उपयोग

Transform प्रॉपर्टीज़

/* ट्रांसलेट */
transform: translateX(100px);
transform: translateY(50px);
transform: translate(100px, 50px);

/* रोटेट */
transform: rotate(45deg);
transform: rotateX(45deg); /* 3D */
transform: rotateY(45deg); /* 3D */

/* स्केल */
transform: scale(1.5);
transform: scaleX(2);

/* स्क्यू */
transform: skew(10deg);

/* कंबाइंड */
transform: translateX(100px) rotate(45deg) scale(1.2);

3D इफेक्ट्स

/* पैरेंट पर पर्सपेक्टिव सेट करें */
.perspective-container {
  perspective: 1000px;
}

/* कार्ड फ्लिप */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.card-front, .card-back {
  backface-visibility: hidden;
}

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

---

परफॉर्मेंस ऑप्टिमाइज़ेशन

GPU-एक्सेलरेटेड प्रॉपर्टीज़

/* ✅ GPU एक्सेलरेटेड (अच्छी परफॉर्मेंस) */
transform: translateX(100px);
transform: scale(1.1);
transform: rotate(45deg);
opacity: 0.5;

/* ❌ CPU कंप्यूटेड (रीफ्लो होता है) */
left: 100px;
width: 200px;
height: 200px;
margin: 10px;

will-change

/* एनिमेशन टारगेट्स के लिए हिंट */
.animated {
  will-change: transform, opacity;
}

/* केवल होवर पर */
.card:hover {
  will-change: transform;
}

/* एनिमेशन के बाद हटाने की सलाह */

रीफ्लो से बचें

/* ❌ बचने वाला पैटर्न */
.bad {
  animation: move 1s infinite;
}
@keyframes move {
  to { left: 100px; } /* रीफ्लो होता है */
}

/* ✅ रिकमेंडेड पैटर्न */
.good {
  animation: moveGood 1s infinite;
}
@keyframes moveGood {
  to { transform: translateX(100px); } /* GPU एक्सेलरेटेड */
}

---

एक्सेसिबिलिटी

रिड्यूस्ड मोशन प्रेफरेंस का सम्मान

/* जब यूज़र रिड्यूस्ड मोशन चाहता है */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* या सेलेक्टिवली */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }

  .transition {
    transition: none;
  }
}

---

प्रैक्टिकल UI पैटर्न

बटन होवर

.button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.button:active {
  transform: translateY(0);
}

मेन्यू ड्रॉपडाउन

.dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.menu:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

मोडल ओपनिंग

.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

स्टैगर्ड अपीयरेंस

.item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

---

FAQ

Q1: Transition काम नहीं कर रहा

A: चेक करें:

• क्या प्रॉपर्टी एनिमेटेबल है?
• display: none से ट्रांज़िशन काम नहीं करता
• क्या स्टार्ट और एंड वैल्यू एक्सप्लिसिटली डिफाइंड हैं?

Q2: एनिमेशन खत्म होने के बाद स्टेट कैसे रखें?

A: animation-fill-mode: forwards का उपयोग करें

.element {
  animation: fadeIn 1s ease forwards;
}

Q3: परफॉर्मेंस खराब है

A:

• केवल transform और opacity को एनिमेट करें
• will-change सही ढंग से उपयोग करें
• बहुत सारे एलिमेंट्स को एनिमेट करने से बचें

Q4: CSS या JavaScript एनिमेशन?

A:

• सिंपल ट्रांज़िशन: CSS
• कॉम्प्लेक्स सीक्वेंस: JavaScript (GSAP, आदि)
• यूज़र इनपुट रिस्पॉन्स: JavaScript
• ऑटो लूप: CSS

---

निष्कर्ष

CSS एनिमेशन के मुख्य बिंदु:

1. Transition: स्टेट चेंज पर रिस्पॉन्ड करता है
2. Animation: ऑटो-प्ले, कीफ्रेम
3. Transform: GPU एक्सेलरेटेड, बेहतरीन परफॉर्मेंस
4. टाइमिंग: ease, cubic-bezier
5. एक्सेसिबिलिटी: prefers-reduced-motion का सम्मान करें

---

संबंधित टूल्स