CSS ट्रांसिशन

CSS ट्रांसिशन

CSS ट्रांजिशन आपको दिए गए समय के दौरान सही तरीके से एट्रिब्यूट के मान को बदलने देता है।

इस एलिमेंट पर माउस को ले जाएं, ताकि CSS ट्रांजिशन इफेक्ट देख सकें:

CSS

इस चैप्टर में, आप नीचे दिए गए एट्रिब्यूट को सीखेंगे:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

ट्रांजिशन के लिए ब्राउज़र समर्थन

टेबल में दिए गए नंबर को देखकर, इस एट्रिब्यूट का पूरा तौर पर समर्थन करने वाले पहले ब्राउज़र का संस्करण निर्धारित किया जाता है।

गुण च्रोम आईई फायरफॉक्स सैफारी ओपेरा
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

CSS ट्रांजिशन का इस्तेमाल कैसे करें?

ट्रांजिशन इफेक्ट बनाने के लिए, आपको दो चीजें स्पष्ट करनी होती है:

  • आपको जो CSS एट्रिब्यूट पर इफेक्ट जोड़ना है
  • इफेक्ट की अवधि

ध्यान दें:अगर अवधि निर्धारित नहीं की गई है तो ट्रांजिशन इफेक्ट असफल होगा क्योंकि डिफ़ॉल्ट मान 0 है।

नीचे दिए उदाहरण में 100px * 100px का लाल <div> एलिमेंट दिखाया गया है। <div> एलिमेंट width एट्रिब्यूट के लिए ट्रांजिशन इफेक्ट भी निर्धारित करता है, जिसकी अवधि 2 सेकंड है:

उदाहरण

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

जब निर्धारित CSS एट्रिब्यूट (width) का मान बदलता है तो ट्रांजिशन इफेक्ट शुरू होता है।

अब, हमें width एट्रिब्यूट के लिए एक नया मान निर्धारित करने के लिए माउस से <div> एलिमेंट पर हॉवर करें:

उदाहरण

div:hover {
  width: 300px;
}

आप खुद साफ़ी दोष्ट

कृपया ध्यान दें कि जब स्पेक्ट्रम एलिमेंट से निकलता है तो यह धीरे-धीरे अपने मूल शैली में वापस आता है।

कई गुण के मान को बदलें

नीचे के उदाहरण में width और height गुण को ट्रांसिशन के रूप में जोड़ा गया है, width 2 सेकंड और height 4 सेकंड है:

उदाहरण

div {
  transition: width 2s, height 4s;
}

आप खुद साफ़ी दोष्ट

ट्रांसिशन की गति वक्र को निर्धारित करें

transition-timing-function गुण को ट्रांसिशन के गति वक्र को निर्धारित करता है。

transition-timing-function गुण को नीचे के मान ग्रहण करता है:

  • ease - ट्रांसिशन को निर्धारित करता है, जो पहले धीमी शुरू होता है, फिर तेज होता है और फिर धीमी अंत होता है (मूलभूत)
  • linear - शुरू से लेकर अंत तक एकसमान गति के ट्रांसिशन को निर्धारित करता है
  • ease-in - शुरू में धीमी ट्रांसिशन को निर्धारित करता है
  • ease-out - अंत में धीमी ट्रांसिशन को निर्धारित करता है
  • ease-in-out - शुरू में और अंत में धीमी ट्रांसिशन को निर्धारित करता है
  • cubic-bezier(n,n,n,n) - आपको तीन बेसेल फ़ंक्शन में अपने मान निर्धारित करने की अनुमति देता है

नीचे के उदाहरण में इस्तेमाल किए जा सकने वाले विभिन्न गति वक्र का प्रदर्शन किया गया है:

उदाहरण

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

आप खुद साफ़ी दोष्ट

देरी ट्रांसिशन को देखें

transition-delay गुण को ट्रांसिशन के प्रभाव को निर्धारित करता है (सेकंड में).

नीचे का उदाहरण 1 सेकंड की देरी के साथ चालू होता है:

उदाहरण

div {
  transition-delay: 1s;
}

आप खुद साफ़ी दोष्ट

ट्रांसिशन + ट्रांसफॉर्म

नीचे का उदाहरण ट्रांसिशन को ट्रांसफॉर्म को ट्रांसिशन के रूप में जोड़ता है:

उदाहरण

div {
  transition: width 2s, height 2s, transform 2s;
}

आप खुद साफ़ी दोष्ट

अधिक ट्रांसिशन उदाहरण

आप CSS ट्रांसिशन गुण को एक-एक करके निर्दिष्ट कर सकते हैं, जैसा कि नीचे दिखाया गया है:

उदाहरण

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

आप खुद साफ़ी दोष्ट

या संक्षिप्त रूप में इस्तेमाल करें transition गुण:

उदाहरण

div {
  transition: width 2s linear 1s;
}

आप खुद साफ़ी दोष्ट

CSS ट्रांसिशन गुण

नीचे पट्टी में सभी CSS ट्रांसिशन गुण दिखाया गया है:

गुण वर्णन
transition चार ट्रांसिशन अटिवारी को एकल अटिवारी में सेट करने के लिए उपयोग किया जाने वाला लघुअटिवारी
transition-delay ट्रांसिशन इफ़ेक्ट के लिए देरी (सेकंड में) निर्धारित करता है。
transition-duration ट्रांसिशन इफ़ेक्ट के लिए कितने सेकंड या मिलीसेकंड चलना चाहिए निर्धारित करता है。
transition-property ट्रांसिशन इफ़ेक्ट के लिए लक्ष्यबद्ध CSS अटिवारी के नाम को निर्धारित करता है。
transition-timing-function ट्रांसिशन इफ़ेक्ट की गति का गामा रेखा निर्धारित करता है。