Manually stepping through CSS animation with JavaScript -

अगर मेरे पास ऐसा सीएसएस कीफ्रेम एनीमेशन है

  @केफ्रेम फ़्लैश-लाल {50% {पृष्ठभूमि: # एफ 00; }} # Goflash.anm-flash {एनीमेशन-नाम: फ्लैश-लाल; एनिमेशन-अवधि: .5 एस; पृष्ठभूमि: आरजीबीए (255, 0, 0, 0); }   
 तब मैं हमेशा एनीमेशन को इस तरह से ट्रिगर कर सकता हूं:  
  var gf = document.query सिलेक्टर ("# goflash"); gf.classList.remove ( "एएनएम-फ्लैश"); SetTimeout (फ़ंक्शन () {gf.classList.add ("anm-flash");}, 50);   
 क्या जावास्क्रिप्ट पर निर्भर होने के लिए एनीमेशन-अवधि / एनीमेशन-टाइमिंग फ़ंक्शन ओवरराइड करने का कोई तरीका है? मुझे  gf  लाल की पृष्ठभूमि बनाने के लिए  gf.animate ("flash-red", "50%")  जैसे कुछ कहने में सक्षम होना चाहते हैं, या < कोड> जीएफ। एनिमेट ("फ्लैश-लाल", "75%")  पृष्ठभूमि को अधिक  rgba (255, 0, 0, .5)  की तरह बनाने के लिए ।  
 आदर्श रूप से, एक ही तकनीक संक्रमण के लिए काम करेगी।  gf.transitionTo ("नया-वर्ग", "50%")  तत्व को आधे रास्ते के रूप में संक्रमित दिखाएगा।  
 जाहिर है  फ्लैश-लाल  सिर्फ एक उदाहरण है। मैं किसी भी एनीमेशन के साथ ऐसा करने में सक्षम होना चाहता हूँ।   < P> 
 
 अंतर्निहित एनीमेशन के साथ:  
  दुर्भाग्य से, नहीं   
 संक्रमण के आंतरिकों को जावास्क्रिप्ट के लिए उजागर नहीं किया जाता है ताकि आप डेटा सेट करने या प्राप्त करने के लिए उसमें नल न कर सकें। और यह एक उद्देश्य के लिए है - अगर डेटा  थे  इसे उजागर किया जाएगा इसका मतलब कम दक्षता होगा क्योंकि जावास्क्रिप्ट इवेंट की कतार को अद्यतन करना होगा। जैसा कि जेएस एकल-थ्रेडेड है और एनीमेशन एक पृथक धागा पर चला जाता है, आप जल्द ही इसे एक अलग थ्रेड पर आंतरिक रूप से संकलित कोड में चलने के लाभ को समाप्त कर देंगे।  
 आप फिर भी अपना बदलाव कर सकते हैं इसमें गणना बदलावों को शामिल करना शामिल है।  
 यह जितना जटिल नहीं है उतना जटिल लगता है जैसा कि आप बस एटम के लिए एक प्रक्षेपण फार्मूला का उपयोग करते हैं:  
  current = source + (गंतव्य - स्रोत) * अंश;   
 उदाहरण के लिए, रंग के लिए आप इसे रंग घटक के साथ उपयोग कर सकते हैं। मान लेते हैं कि हमारे पास रंग ऑब्जेक्ट्स  r ,  g ,  b :  
  var रंग 1 = {r : 100, जी: 200, बी: 55}; // कुछ यादृच्छिक रंग var रंग 2 = {r: 0, g: 100, b: 100}; Var अंश = 0.5; // 0-1   
 यहां वर्तमान आरजीबी होगा:  
  r = color1.r + (color2.r - color1.r) * अंश ; जी = color1.g + (color2.g - color1.g) * अंश; बी = रंग 1.बी + (रंग 2. बी - रंग 1. बी) * अंश;   
 पदों के लिए:  
  var pos1x = 100; Var pos1y = 100; Var पॉज़ 2x = 500; Var pos2y = 250; Var अंश = 1; // 0-1 पॉज़एक्स = पॉज़ 1 एक्स + (पॉज़ 2 एक्स - पॉस 1 एक्स) * अंश; Posy = pos1y + (pos2y - pos1y) * अंश;   
 और आगे भी।  
 आवरण कार्यों को बनाकर आप आसानी से इनकी गणना कर सकते हैं और उन्हें सचेत करने के लिए उन्हें एक पाश में भी डाल सकते हैं।  
 उदाहरण रंग 1 और रंग 2 के बीच संक्रमण की स्थापना के लिए कार्य। शैली अर्थात् हो सकता है।  backgroundcolor ,  रंग  आदि:  
  फ़ंक्शन सेट कलर (तत्व, शैली, रंग 1, रंग 2, अंश) {var r = color1.r + (रंग 2। आर - रंग 1। आर) * अंश; Var g = color1.g + (color2.g - color1.g) * अंश; Var बी = रंग 1। बी + (रंग 2। बी - रंग 1. बी) * अंश; Element.style [शैली] = 'आरजीबी (' + (आर | 0) + ',' + (जी | 0) + ',' + (बी | 0) + ')'; }   
  ( r | 0  बस दशमलव भाग काट रहा है।)   
 और स्थिति के लिए , उदाहरण के लिए:  
  var pos1 = {x: 0, y: 0}; Var pos2 = {x: 200, y: 0}; फ़ंक्शन setPosition (तत्व, pos1, pos2, fraction) {var x = pos1.x + (pos2.x - pos1.x) * अंश; Var y = pos1.y + (pos2.y - pos1.y) * अंश; Element.style.left = x + 'px'; Element.style.top = y + 'px'; }   
 एक साधारण डेमो (स्लाइडर्स देखने के लिए क्रोम या अरोड़ा 23 का उपयोग करें, स्लाइडर एफएफ 23 के अगले संस्करण में आता है।)  
   < / P> 
   
 स्रोत और स्रोत के बीच किसी भी बिंदु पर मैन्युअल रूप से सेट संक्रमण भाग्य, या उन्हें चेतन।