Style transition गुण

परिभाषा और उपयोग

transition गुण चार रूपांतरण गुणों का लघुगुण है:

टिप्पणी:हमेशा इसे निर्धारित करें transitionDuration गुणअन्यथा 0 समय लगता है, रूपांतरण अवैध होगा。

और देखें:

CSS संदर्भ पुस्तकःtransition गुण

उदाहरण

डिव एलीमेंट पर माउस को ले जाकर उसके आकार को धीरे-धीरे बदलें:

document.getElementById("myDIV").style.transition = "all 2s";

स्वयं प्रयोग करें

व्याकरण

transition गुण वापसी मान देता है:

object.style.transition

transition गुण सेट करें:

object.style.transition = "property duration timing-function delay|initial|inherit"

गुण मान

मान वर्णन
transitionProperty रूपांतरण प्रभाव के लिए CSS गुण का नाम निर्धारित करता है。
transitionDuration रूपांतरण प्रभाव पूरा होने के लिए कितने सेकंड या मिलीसेकंड का समय लेता है।
transitionTimingFunction रूपांतरण गति वक्त की कक्षा निर्धारित करता है。
transitionDelay रूपांतरण प्रभाव कब शुरू होना है इसे परिभाषित करता है。
initial इस गुण को उसके मूलभूत मान पर सेट करें। देखें initial.
inherit इस गुण को उसके माता एलीमेंट से इन्हेरिट करें। देखें inherit.

तकनीकी विवरण

मूलभूत मान: all 0 ease 0
वापसी मान: इनकर रूपांतरण के लिए स्ट्रिंग के transition गुण.
CSS संस्करण: CSS3

ब्राउज़र समर्थन

तालिका में दिए गए संख्याएं पहली बार इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण को दर्शाती हैं。

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
26.0 10.0 16.0 6.1 12.1