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

Question

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

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

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

यह प्रभाव संक्रमणों के माध्यम से प्राप्त किया जा सकता है जैसे:

.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/

ऐसा दिखने वाले HTML के साथ:

<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

ऐसा लगता है कि आप उन्हें कैसे करना है पर एक हैंडल मिल गया है, न कि उन्हें कब करना है।

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

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

Comments

इस लेख को भी देखें kirupa.com/html5/css3_animations_vs_transitions.htm , यह सही ढंग से इंगित करता है कि संक्रमण जावास्क्रिप्ट बातचीत करते समय जाने का रास्ता है।

— स्कॉट जंगविर्थ

Answer 2

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

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

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

नाम सीएसएस में उनके उद्देश्यों को उचित रूप से फिट करते हैं

इसलिए, आपके द्वारा दिए गए उदाहरण में बदलाव का उपयोग करना चाहिए क्योंकि यह केवल एक राज्य से दूसरे में परिवर्तन है

Answer 3

एक छोटा जवाब, सीधे बिंदु पर:

संक्रमण:

1. ट्रिगर तत्व की आवश्यकता है: (होवर,: फोकस आदि)
2. केवल 2 एनीमेशन स्टेट्स (शुरू और अंत)
3. सरल एनिमेशन के लिए उपयोग किया जाता है (बटन, ड्रॉपडाउन मेनू और इतने पर)
4. बनाने के लिए आसान है लेकिन इतने सारे एनीमेशन / प्रभाव की संभावना नहीं है

एनीमेशन @keyframes:

1. इसका उपयोग अंतहीन एनिमेशन के लिए किया जा सकता है
2. 2 से अधिक राज्य सेट कर सकते हैं
3. कोई सीमा नहीं

दोनों एक बहुत चिकनी प्रभाव के लिए सीपीयू त्वरण का उपयोग करते हैं।

Comments

जब आप "CPU त्वरण" कहते हैं, तो क्या आपका मतलब "GPU त्वरण" था? मेरा मानना ​​है कि "ट्रांसलेशन" जैसे गैर-लेआउट पुनर्गणना एनिमेशन से यह लाभ मिलता है

— jv-dev

Answer 4

1. जब तक आप एक ही संक्रमण का उपयोग नहीं कर रहे हैं, तब तक एनीमेशन बहुत अधिक कोड लेता है, जिस स्थिति में एनीमेशन बेहतर होगा।

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

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

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

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

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

Comments

मुझे यह भी जोड़ना चाहिए कि एनिमेशन में कीफ़्रेम हैं, जिससे आप बहुत जटिल और नियंत्रित प्रगति कर सकते हैं, जो अद्भुत है।

— पॉलकैपर्सन

Answer 5

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

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

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

Comments

मैं इस परिभाषा से असहमत हूं क्योंकि दोनों निर्दिष्ट करते हैं कि कैसे और क्या

— Zach Saucier

Answer 6

क्या ऐसा कुछ है जो प्रदर्शन के बारे में कहा जा सकता है। क्या दोनों एच / डब्ल्यू त्वरण का लाभ उठाते हैं?

आधुनिक ब्राउज़रों में, गुणों के लिए h / w त्वरण होता है filter, opacityऔर transform। यह सीएसएस एनिमेशन और सीएसएस बदलाव दोनों के लिए है।

Answer 7

.yourClass {
    transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}

.yourClass:hover {
    color: #f00;
}

<p class="yourClass"> Hover me </p>

Answer 8

मेरा मानना ​​है कि CSS3 एनीमेशन बनाम CSS3 संक्रमण आपको वह उत्तर देगा जो आप चाहते हैं।

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

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

Comments

# 2 और # 3 सच नहीं हैं

— Zach Saucier

मुझे यकीन नहीं है कि # 3 कैसे असत्य है? यह विचार करने के लिए एक उचित बिंदु लगता है, और एनीमेशन-पुनरावृति-गणना एक वैध संपत्ति लगती है: developer.mozilla.org/en-US/docs/Web/CSS/…

इसके साथ दो बातें: 1) अगर एक संक्रमण फिर से शुरू हो जाता है, तो यह अभी भी एक "दोहराना" है, भले ही यह पहली पुनरावृत्ति के तुरंत बाद न हो। 2) आपके पास एक संक्रमण हो सकता है जो एनीमेशन के आधार पर तत्काल दोहराता है। देखें मेरी सीएसएस-ट्रिक्स लेख मैं क्या मतलब के बारे में अधिक के लिए।

— Zach Saucier

Answer 9

अपने आप को परेशान मत करो जो बेहतर है। मेरा विचार यह है कि, यदि आप अपनी समस्या को कोड की सिर्फ एक या दो पंक्तियों के साथ हल कर सकते हैं, तो बस कोडों का गुच्छा लिखने के बजाय ऐसा करें जिससे समान व्यवहार हो। वैसे भी, संक्रमण एनीमेशन के सबसेट की तरह है। इसका सीधा सा मतलब है कि संक्रमण कुछ समस्याओं को हल कर सकता है जबकि दूसरी ओर एनीमेशन सभी समस्याओं को हल कर सकता है। एनीमेशन आपको प्रत्येक चरण का नियंत्रण 0% से 100% तक शुरू करने में सक्षम बनाता है जो कि कुछ संक्रमण है जो वास्तव में नहीं कर सकता है। एनीमेशन के लिए आपको कोड का गुच्छा लिखना पड़ता है जबकि संक्रमण एक या दो कोड की पंक्तियों का उपयोग करता है ताकि आप जो काम कर रहे हैं उसके आधार पर उसी परिणाम का प्रदर्शन कर सकें। जावास्क्रिप्ट के बिंदु से आ रहा है, संक्रमण का उपयोग करना सबसे अच्छा है। कुछ भी है कि सिर्फ दो चरण शामिल है शुरू और खत्म संक्रमण का उपयोग करें। सारांश, अगर यह तनावपूर्ण डॉन है '