CSS3 संक्रमण के साथ विलंब माउसआउट/होवर

Question

मुझे एक बॉक्स मिला है जो आच्छादित होने पर आकार बदलता है। हालांकि, मैं माउसआउट चरण में देरी करना चाहता हूं, ताकि पुराने आकार को वापस पाने से पहले बॉक्स कुछ सेकंड के लिए नया आकार रख सके।

div { 
    width: 70px; 
    -webkit-transition: .5s all;  
} 

div:hover { 
    width:130px; 
} 

क्या यह जावास्क्रिप्ट और केवल CSS3 के बिना करना संभव है? मुझे केवल वेबकिट का समर्थन करने की परवाह है।

Answer 1

div { 
    width: 70px; 
    -webkit-transition: .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 

div:hover { 
    width:130px; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

यह माउसओवर स्थिति को तुरंत ट्रिगर करेगा, लेकिन माउसआउट ट्रिगर होने तक 5 सेकंड तक प्रतीक्षा करें।

Fiddle

Answer 2

संक्रमण घोषित किया जा सकता के रूप में

transition: .5s all 5s 

(आशुलिपि, पहली संख्या अवधि है, दूसरा नंबर देरी है) तो आप अलग संक्रमण-देरी की जरूरत नहीं है

क्षमा करें, कोई टिप्पणी के रूप में नहीं जोड़ा जा सकता है क्योंकि मेरे पास पर्याप्त अंक नहीं हैं