सीएसएस: एनीमेशन बनाम संक्रमण

Question

तो, मैं समझता हूं कि CSS3 संक्रमण और एनिमेशन दोनों को कैसे निष्पादित किया जाए। क्या स्पष्ट नहीं है, और मैंने गुमराह किया है, इसका उपयोग कब किया जाता है।

उदाहरण के लिए, यदि मैं गेंद उछाल बनाना चाहता हूं, तो यह स्पष्ट है कि एनीमेशन जाने का तरीका है। मैं कीफ्रेम प्रदान कर सकता था और ब्राउज़र इंटरमीडिएट फ्रेम करेगा और मेरे पास एक अच्छी एनीमेशन होगी।

हालांकि, ऐसे मामले हैं जब एक कहा प्रभाव किसी भी तरह से हासिल किया जा सकता है। एक सरल और सामान्य उदाहरण फेसबुक शैली फिसलने दराज मेनू लागू होगा:

इस आशय तो जैसे संक्रमण के माध्यम से प्राप्त किया जा सकता:

.sf-page { 
    -webkit-transition: -webkit-transform .2s ease-out; 
} 

.sf-page.out { 
    -webkit-transform: translateX(240px); 
} 

http://jsfiddle.net/NwEGz/

या, तो जैसे एनिमेशन के माध्यम से:

.sf-page { 
    -webkit-animation-duration: .4s; 
    -webkit-transition-timing-function: ease-out; 
} 

.sf-page.in { 
    -webkit-animation-name: sf-slidein; 
    -webkit-transform: translate3d(0, 0, 0); 
} 

.sf-page.out { 
    -webkit-animation-name: sf-slideout; 
    -webkit-transform: translateX(240px); 
} 

@-webkit-keyframes sf-slideout { 
    from { -webkit-transform: translate3d(0, 0, 0); } 
    to { -webkit-transform: translate3d(240px, 0, 0); } 
} 

@-webkit-keyframes sf-slidein { 
    from { -webkit-transform: translate3d(240px, 0, 0); } 
    to { -webkit-transform: translate3d(0, 0, 0); } 
} 

http://jsfiddle.net/4Z5Mr/

एचटीएमएल कि इतने की तरह लग रहा है:

<div class="sf-container"> 
    <div class="sf-page in" id="content-container"> 
     <button type="button">Click Me</button> 
    </div> 
    <div class="sf-drawer"> 
    </div> 
</div> 

और, इस साथ jQuery स्क्रिप्ट:

$("#content-container").click(function(){ 
    $("#content-container").toggleClass("out"); 
    // below is only required for css animation route 
    $("#content-container").toggleClass("in"); 
}); 

मैं समझने के लिए क्या चाहते हैं, उसके पेशेवरों और इन तरीकों का विपक्ष हो रहा है।

1. एक स्पष्ट अंतर यह है कि एनिमेटिंग एक बहुत अधिक कोड ले रहा है।
2. एनिमेशन बेहतर लचीलापन देता है। मेरे पास स्लाइडिंग के लिए अलग-अलग एनीमेशन हो सकते हैं और
3. प्रदर्शन के बारे में कुछ कहा जा सकता है। क्या दोनों एच/डब्ल्यू त्वरण का लाभ उठाते हैं?
4. जो अधिक आधुनिक है और आगे बढ़ने का तरीका
5. और कुछ भी जो आप जोड़ सकते हैं? जब तक आप एक ही संक्रमण अधिक से अधिक उपयोग कर रहे हैं, जिस स्थिति में एक एनीमेशन बेहतर होगा

Answer 1

यह आप की तरह लग रहा करने के लिए परिवर्तन है दे दी है ' उन्हें कैसे करना है, इस पर एक संभाल लिया है, बस उन्हें कब नहीं करना है।

एक संक्रमण , एक एनीमेशन है सिर्फ एक है कि दो अलग-अलग राज्यों के बीच किया जाता है - जो कि एक शुरुआत के राज्य और एक अंत राज्य। एक दराज मेनू की तरह, प्रारंभ स्थिति खुली हो सकती है और अंत स्थिति बंद हो सकती है, या इसके विपरीत।

आप कुछ है कि नहीं विशेष रूप से, एक शुरुआत के राज्य और एक अंत राज्य शामिल हैं या आप एक संक्रमण में मुख्य-फ़्रेम पर अधिक ठीक अनाज नियंत्रण की आवश्यकता है प्रदर्शन करने के लिए चाहते हैं, तो आप एक एनीमेशन का उपयोग करने के लिए मिला है ।

Answer 2

1. एनीमेशन एक बहुत अधिक कोड लेता है।

2. आप एनीमेशन के बिना अंदर और बाहर स्लाइडिंग के लिए अलग-अलग प्रभाव डाल सकते हैं। बस दोनों मूल नियम और संशोधित नियम पर एक अलग संक्रमण है:

   .two-transitions { 
       transition: all 50ms linear; 
   } 
   
   .two-transitions:hover { 
       transition: all 800ms ease-out; 
   } 
   

3. एनिमेशन सिर्फ बदलाव के अनुसार इसका सारांश हैं, इसलिए यदि संक्रमण हार्डवेयर त्वरित है, एनीमेशन हो जाएगा। इससे कोई फ़र्क नहीं पड़ता।

4. दोनों बहुत आधुनिक हैं।

5. अंगूठे का मेरा नियम है यदि मैं तीन बार एक ही संक्रमण का उपयोग करता हूं, तो यह शायद एक एनीमेशन होना चाहिए। भविष्य में बनाए रखना और बदलना आसान है। लेकिन यदि आप केवल एक बार इसका उपयोग कर रहे हैं, तो यह एनीमेशन बनाने के लिए और अधिक मूल्यवान है और शायद इसके लायक नहीं है।

Answer 3

मैं (मरियम वेबस्टर के अनुसार) दूँगा परिभाषाओं को खुद के लिए बोलते हैं:

संक्रमण: एक आंदोलन, विकास, या विकास एक रूप, मंच, या शैली के लिए से एक और

एनिमेशन: जीवन या जीवन के गुणों के साथ संपन्न; आंदोलन से भरा

नाम उचित रूप से

तो सीएसएस में अपने उद्देश्यों को फिट, उदाहरण आप संक्रमण का उपयोग करना चाहिए, क्योंकि यह केवल एक एक राज्य से दूसरे

Answer 4

एनिमेशन केवल वही हैं - गुणों के सेट का एक आसान व्यवहार। दूसरे शब्दों में यह निर्दिष्ट करता है कि तत्व गुणों के एक समूह के साथ होना चाहिए। आप एक एनीमेशन परिभाषित करते हैं और वर्णन करते हैं कि एनीमेशन प्रक्रिया के दौरान गुणों के इस सेट को कैसे व्यवहार करना चाहिए।

संक्रमण दूसरी तरफ कैसे एक संपत्ति (या गुण) अपने परिवर्तन प्रदर्शन करना चाहिए निर्दिष्ट करें। प्रत्येक परिवर्तन कुछ संपत्ति के लिए एक नया मूल्य निर्धारित करना, जावास्क्रिप्ट या सीएसएस के साथ होना, हमेशा एक संक्रमण है, लेकिन डिफ़ॉल्ट रूप से यह चिकनी नहीं है। सीएसएस शैली में transition सेट करके आप इन परिवर्तनों को करने के लिए अलग (चिकनी) तरीका परिभाषित करते हैं।

यह कहा जा सकता है कि संक्रमण एक डिफ़ॉल्ट एनीमेशन है कि हर बार निर्दिष्ट संपत्ति बदल गया है प्रदर्शन किया जाना चाहिए परिभाषित करते हैं।

Answer 5

मेरा मानना ​​है कि CSS3 animation vs CSS3 transition आपको वह उत्तर देगा जो आप चाहते हैं।

मूल रूप से नीचे कुछ टेकअवे हैं:

1. यदि प्रदर्शन चिंता का विषय है, तो CSS3 के संक्रमण चुनें।
2. यदि प्रत्येक संक्रमण के बाद राज्य को बनाए रखा जाना है, तो CSS3 संक्रमण का चयन करें।
3. यदि एनीमेशन को दोहराने की आवश्यकता है, तो CSS3 एनीमेशन चुनें। क्योंकि यह एनीमेशन-पुनरावृत्ति-गिनती का समर्थन करता है।
4. यदि एक जटिल एनीमेशन वांछित है।फिर CSS3 एनीमेशन पसंद किया जाता है।