क्यों कुछ सीएसएस संपत्तियों के लिए संक्रमण धीमी गति से कर रहे हैं और कोई भी धाराप्रवाह

Question

मैं 4 घंटे एक स्वीकार्य प्रदर्शन के साथ एक सरल संक्रमण होने पर एक मुक्केबाज़ी खर्च:

left: 2000px; 
-webkit-transition: left 1s linear; 
-moz-transition: left 1s linear; 
-ms-transition: left 1s linear; 

परिणाम था:

सबसे पहले मैं इस कोड की कोशिश की क्रोम v21.0.1180.89 और फ़ायरफ़ॉक्स v15.0.1 पर भयानक, लेकिन आईई 10 पर बहुत अच्छा था। मैंने सीपीयू उपयोग और जीपीयू उपयोग ग्राफ पर कब्जा कर लिया और पाया कि क्रोम मूल सीएसएस गुणों के लिए जीपीयू का उपयोग नहीं करता है, आधुनिक ब्राउज़र के लिए समाधान क्या है?

Answer 1

परिणाम के रूप में मेरी 4 घंटे प्रयोगों यह नीचे की तरह बदलने के उपयोग करने के लिए बेहतर है:

 -webkit-transform: translate(2000px, 0); 
     -webkit-transition: -webkit-transform 1s linear; 
     -moz-transform: translate(2000px, 0); 
     -moz-transition: -moz-transform 1s linear; 
     -ms-transform: translate(2000px, 0); 
     -ms-transition: -ms-transform 1s linear; 

यह IE10, क्रोम v21.0.1180.89 और फ़ायर्फ़ॉक्स v15.0.1 पर महान था।

नोट: IE9 tarnsforms

Answer 2

का समर्थन नहीं करता बाईं या ऊपर, नीचे, मार्जिन या पैडिंग गुण का प्रयोग न करें तत्वों को स्थानांतरित करने के लिए है, लेकिन केवल "परिणत: अनुवाद"।

इसी तरह, तत्वों का आकार बदलने के लिए ऊंचाई या चौड़ाई के बजाय केवल "परिवर्तन: स्केल" का उपयोग करें।

बाएं, ऊपर, नीचे, मार्जिन, पैडिंग, ऊंचाई, चौड़ाई गुण (और कई अन्य) ब्राउज़र को सभी लेआउट का पुनर्मूल्यांकन करने के लिए बाध्य करते हैं, इसलिए कई CPU कार्यों के साथ कई तत्वों की ज्यामिति।

प्रत्येक संपत्ति, एक अलग वजन है इस लेख में यह स्पष्ट रूप से समझाया है high performance animations

Edit1: triggers.com अगर आप प्रत्येक संपत्ति वजन