मेरे पास एक एनीमेशन है, जो बटन होवर स्थिति पर लुप्त होती और बाहर संक्रमण की देखभाल कर रहा है।
समस्या यह है कि डिफ़ॉल्ट एनीमेशन (-webkit-animation: off-state 1s;) पेज लोड पर फायरिंग बंद है। पहली मंडराना अवस्था के बाद ही मैं इसे कैसे सक्रिय कर सकता हूँ?
मुझे पता है कि सीएसएस संक्रमणों का उपयोग करके इसे कैसे प्राप्त किया जा सकता है। मैं एनीमेशन / keyframes का उपयोग कर एक समाधान के लिए देख रहा हूँ।
एचटीएमएल
<div class="button"></div>
सीएसएस
.button { background: #000; width: 20px; height: 20px; -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }
@-webkit-keyframes on-state {
0% { height: 20px; }
100% { height: 100px; }
}
@-webkit-keyframes off-state {
0% { height: 100px; }
100% { height: 20px; }
}
उत्तर:
उत्तर № 1 के लिए 1जैसा कि @Zeaklous ने सुझाव दिया है, यह जावास्क्रिप्ट का उपयोग करके किया जा सकता है, उदा। jQuery का उपयोग:
$(".button").one("mouseout", function () { $(this).addClass("alt-animation"); });
और आगे बढ़ रहा है animation शासन करना .alt-animation वर्ग:
.button { background: #000; width: 20px; height: 20px; }
.button.alt-animation { -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }
आदर्श रूप में, सीएसएस केवल वैकल्पिक होना चाहिए।