जावास्क्रिप्ट का उपयोग कर CSS3 (वेबकिट) एनीमेशन कैसे सक्रिय करें?

मैं वास्तव में अटक गया। मैं एक सीएसएस एनीमेशन चाहता हूं जिसे मैंने एक div पर क्लिक करने के लिए सक्रिय (नीचे) बनाया है। एकमात्र तरीका मैंने सोचा कि मैं ऐसा कर सकता हूं जो ऑनक्लिक ईवेंट बनाने के लिए जावास्क्रिप्ट का उपयोग कर रहा था। हालांकि मुझे नहीं पता कि मेरी सीएसएस फ़ाइल में एनीमेशन को कैसे चलाया/प्रतिरक्षित किया जाए। क्या कोई मेरी मदद कर सकता है?जावास्क्रिप्ट का उपयोग कर CSS3 (वेबकिट) एनीमेशन कैसे सक्रिय करें?

यह मेरी सीएसएस फ़ाइल में एनीमेशन है जिसे मैं div पर क्लिक करके चलाने के लिए चाहता हूं।

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

मैं भी जावास्क्रिप्ट (index.html) के रूप में एक ही फाइल में सीएसएस डालने की कोशिश की और कोशिश करते हैं और क्लिक पर इसे सक्रिय करने के लिए निम्न कोड का इस्तेमाल किया है, लेकिन कोई किस्मत।

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

मदद कृपया :)

स्रोत

2010-12-05 user531192

आप अवधि वंचित हो रहे हैं और आप नाम पर पीछे अंतरिक्ष आपके द्वारा सौंपे जाने है:

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

कुछ अधिक infos पर @-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/

अद्यतन

कुछ कामकाजी कोड।

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

स्रोत

2010-12-05 13:15:13

इसके लिए धन्यवाद, मुझे पिछली जगह नहीं दिखाई दे रही थी। लेकिन मुझे अभी भी समस्या है। अगर मैं उदाहरण के लिए ऐसा करता हूं: test.style.height = "50px"; यह एनिमेट और काम करेगा, हालांकि अगर मैं एक कस्टम एनीमेशन को कॉल करने का प्रयास करता हूं जिसे मैंने इसे पूर्वनिर्धारित किया है: test.style.webkitAnimationName = 'colorchange'; कुछ भी काम नहीं करता है। उस पर कोई विचार? – user531192

क्या आपने अवधि निर्धारित की थी? यह बिना किसी काम करेगा। मैंने उपरोक्त अपने सीएसएस के साथ स्थानीय रूप से सामान का परीक्षण किया और यह काम किया। –

हाँ मेरे पास एक अवधि है, और एनीमेशन ठीक काम करता है अगर मैं इसे एक सीएसएस होवर पर असाइन करता हूं। लेकिन जब मैं इसे खेलने के लिए जावास्क्रिप्ट पर क्लिक करने का प्रयास करता हूं तो मैं इसे काम पर नहीं ला सकता हूं। (ऑनक्लिक काम करता है)। क्या आप इसे ऑनक्लिक के साथ काम कर रहे थे? – user531192

जावास्क्रिप्ट का उपयोग कर CSS3 (वेबकिट) एनीमेशन कैसे सक्रिय करें?

उत्तर

संबंधित मुद्दे