সিএসএস: অ্যানিমেশন বনাম ট্রানজিশন

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/

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. পারফরম্যান্স সম্পর্কে কিছু বলা যেতে পারে যে। উভয়ই h / w ত্বরণের সুবিধা গ্রহণ করে?
4. যা আরও আধুনিক এবং এগিয়ে যাওয়ার পথ
5. আর কিছু যুক্ত করতে পারো?

Answer 1

দেখে মনে হচ্ছে যে এগুলি কীভাবে করবেন তা আপনি কীভাবে একটি হ্যান্ডেল পেয়েছেন, কখন তা করবেন না।

একটি রূপান্তর হ'ল একটি অ্যানিমেশন , কেবল একটি যা দুটি স্বতন্ত্র অবস্থার মধ্যে সঞ্চালিত হয় - অর্থাত্ একটি সূচনা রাষ্ট্র এবং শেষের অবস্থা। একটি ড্রয়ার মেনুর মতো, প্রারম্ভের অবস্থাটি উন্মুক্ত হতে পারে এবং শেষের অবস্থাটি বন্ধ হতে পারে, বা বিপরীতে।

আপনি যদি এমন কিছু সম্পাদন করতে চান যা নির্দিষ্টভাবে কোনও প্রারম্ভ অবস্থা এবং শেষের রাজ্যের সাথে জড়িত না থাকে বা কোনও ক্রান্তিকালে কীফ্রেমগুলির উপর আপনার আরও সূক্ষ্ম শস্য নিয়ন্ত্রণের প্রয়োজন হয় তবে আপনাকে একটি অ্যানিমেশন ব্যবহার করতে হবে।

Comments

এই নিবন্ধটি খুব পরীক্ষা করে দেখুন kirupa.com/html5/css3_animations_vs_transitions.htm , এটি সঠিকভাবে উল্লেখ করেছে যে জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন করার সময় রূপান্তরগুলি যাওয়ার উপায় go

— স্কট জংউথर्थ

Answer 2

আমি সংজ্ঞাগুলি তাদের পক্ষে বলতে দেব (মেরিয়াম-ওয়েবস্টার অনুসারে):

রূপান্তর : একটি আন্দোলন, বিকাশ, বা এক রূপ, মঞ্চ বা শৈলী থেকে অন্য রূপে বিবর্তন

অ্যানিমেশন : জীবন বা জীবনের গুণাবলীতে সমৃদ্ধ; চলাচল পূর্ণ

নামগুলি সিএসএসে যথাযথভাবে তাদের উদ্দেশ্যে ফিট করে

সুতরাং, আপনি যে উদাহরণ দিয়েছেন তা হ'ল রূপান্তরগুলি ব্যবহার করা উচিত কারণ এটি কেবলমাত্র একটি রাজ্য থেকে অন্য রাজ্যে পরিবর্তন

Answer 3

সংক্ষিপ্ত উত্তর, সরাসরি পয়েন্টে:

ট্রানজিশন:

1. একটি ট্রিগার উপাদান প্রয়োজন: (: হোভার,: ফোকাস ইত্যাদি)
2. কেবলমাত্র 2 অ্যানিমেশন স্টেটস (শুরু এবং শেষ)
3. সহজ অ্যানিমেশন (বোতাম, ড্রপডাউন মেনু এবং তাই) জন্য ব্যবহৃত
4. তৈরি করা সহজ তবে অনেক অ্যানিমেশন / এফেক্ট সম্ভাবনা নেই

অ্যানিমেশন @ কীফ্রেমস:

1. এটি অন্তহীন অ্যানিমেশনগুলির জন্য ব্যবহার করা যেতে পারে
2. 2 টিরও বেশি রাজ্য নির্ধারণ করতে পারে
3. কোনও সীমানা নেই

উভয়ই অনেক মসৃণ প্রভাবের জন্য সিপিইউ ত্বরণ ব্যবহার করে।

Comments

আপনি যখন "সিপিইউ এক্সিলারেশন" বলবেন, আপনি সম্ভবত "জিপিইউ ত্বরণ" বলতে চাইছেন? আমি বিশ্বাস করি যে "অনুবাদ" এর মতো অ-লেআউট পুনর্নবীকরণকারী অ্যানিমেশনগুলি সেই সুবিধাটি পান

— jv-dev

Answer 4

1. অ্যানিমেশনটিতে অনেক বেশি কোড লাগে যদি না আপনি বারবার একই সংক্রমণটি ব্যবহার করেন, তবে এ্যানিমেশনটি আরও ভাল।

2. অ্যানিমেশন ছাড়াই বাইরে স্লাইডিংয়ের জন্য আপনার বিভিন্ন প্রভাব থাকতে পারে। মূল নিয়ম এবং পরিবর্তিত নিয়ম উভয়কেই আলাদা আলাদা রূপান্তর করতে হবে:

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

3. অ্যানিমেশনগুলি কেবলমাত্র রূপান্তরের বিমূর্ততা, সুতরাং যদি রূপান্তরটি হার্ডওয়ারকে ত্বরান্বিত করা হয় তবে অ্যানিমেশনটি হবে। এতে কোন পার্থক্য নেই.

4. দুজনেই খুব আধুনিক।

5. আমার থাম্বের নিয়মটি হ'ল যদি আমি একই সংক্রমণটি তিনবার ব্যবহার করি তবে এটি সম্ভবত অ্যানিমেশন হওয়া উচিত। এটি ভবিষ্যতে বজায় রাখা এবং পরিবর্তন করা সহজ। তবে আপনি যদি এটি একবার ব্যবহার করেন তবে অ্যানিমেশনটি তৈরি করতে এটি আরও বেশি টাইপ করছে এবং সম্ভবত এটির পক্ষে মূল্য নেই।

Comments

আমার আরও যোগ করা উচিত যে অ্যানিমেশনগুলিতে কীফ্রেম রয়েছে, যা আপনাকে খুব জটিল এবং নিয়ন্ত্রিত অগ্রগতি করতে দেয়, যা এক ধরণের আশ্চর্যজনক।

— paulcpederson

Answer 5

অ্যানিমেশনগুলি কেবল এটি - বৈশিষ্ট্যের সেটগুলির একটি মসৃণ আচরণ behavior অন্য কথায় এটি উল্লেখ করে যে উপাদানগুলির বৈশিষ্ট্যগুলির সেটগুলিতে কী ঘটতে হবে। আপনি অ্যানিমেশনটি সংজ্ঞায়িত করেন এবং বর্ণনা দিন যে অ্যানিমেশন প্রক্রিয়া চলাকালীন এই বৈশিষ্ট্যগুলির সেটটি কেমন আচরণ করা উচিত।

অন্যদিকে রূপান্তরগুলি কীভাবে কোনও সম্পত্তি (বা বৈশিষ্ট্য) তাদের পরিবর্তন সম্পাদন করে তা নির্দিষ্ট করে। প্রতিটি পরিবর্তন। নির্দিষ্ট সম্পত্তির জন্য একটি নতুন মান নির্ধারণ করা, এটি জাভাস্ক্রিপ্ট বা সিএসএস সহ সর্বদা একটি রূপান্তর, তবে ডিফল্টরূপে এটি মসৃণ নয়। transitionসিএসএস স্টাইলে সেট করে আপনি এই পরিবর্তনগুলি সম্পাদন করার বিভিন্ন (মসৃণ) উপায় নির্ধারণ করেন।

এটি বলা যেতে পারে যে ট্রানজিশনগুলি একটি ডিফল্ট অ্যানিমেশনকে সংজ্ঞায়িত করে যা নির্দিষ্ট সম্পত্তি পরিবর্তিত হওয়ার পরে প্রতিবার সঞ্চালন করা উচিত।

Comments

আমি উভয় হিসাবে এই সংজ্ঞা সঙ্গে মতানৈক্য উল্লেখ কিভাবে এবং কি

— জ্যাক Saucier

Answer 6

পারফরম্যান্স সম্পর্কে কিছু বলা যেতে পারে যে। উভয়ই h / w ত্বরণের সুবিধা গ্রহণ করে?

আধুনিক ব্রাউজারে, 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

আমার বিশ্বাস সিএসএস 3 অ্যানিমেশন বনাম সিএসএস 3 রূপান্তর আপনাকে যে উত্তরটি দিতে চাইবে তা দেবে।

মূলত নীচে কিছু গ্রহণযোগ্য পথ রয়েছে:

1. কর্মক্ষমতা যদি উদ্বেগের বিষয় হয় তবে CSS3 রূপান্তরটি বেছে নিন।
2. প্রতিটি ট্রানজিশনের পরে যদি রাজ্য বজায় রাখা হয় তবে CSS3 রূপান্তর চয়ন করুন।
3. যদি অ্যানিমেশনটির পুনরাবৃত্তি করা প্রয়োজন, CSS3 অ্যানিমেশনটি চয়ন করুন। কারণ এটি অ্যানিমেশন-পুনরাবৃত্তি-গণনা সমর্থন করে।
4. যদি জটিল অ্যানিমেশনটি পছন্দ হয়। তারপরে CSS3 অ্যানিমেশন পছন্দ করা হয়।

Comments

# 2 এবং # 3 সত্য নয়

— জ্যাচ সসিয়ের

আমি নিশ্চিত না # 3 অসত্য কিভাবে? এটি বিবেচনা করার জন্য একটি যুক্তিসঙ্গত বিষয় বলে মনে হচ্ছে এবং অ্যানিমেশন-পুনরাবৃত্তি-গণনাটি একটি বৈধ সম্পত্তি বলে মনে হচ্ছে: developer.mozilla.org/en-US/docs/Web/CSS/…

এর সাথে দুটি জিনিস: ১) যদি কোনও পুনরায় संक्रमण পরে আবার শুরু হয় তবে এটি এখনও "পুনরাবৃত্তি" হলেও এটি প্রথম পুনরাবৃত্তির অবিলম্বে না হলেও। 2) আপনার কাছে এমন একটি রূপান্তর থাকতে পারে যা অ্যানিমেশনের উপর নির্ভর করে অবিলম্বে পুনরাবৃত্তি করে। দেখুন আমার সিএসএস-ট্রিকস নিবন্ধ কি আমি বলতে চাচ্ছি সম্পর্কে আরো জানার জন্য।

— জাচ স্যুসিয়ার

Answer 9

নিজেকে বিরক্ত করবেন না যা ভাল। আমার প্রাপ্যতাটি হ'ল, যদি আপনি কেবলমাত্র এক বা দুটি লাইন কোড দিয়ে আপনার সমস্যার সমাধান করতে পারেন তবে কোডগুলি গুচ্ছ লেখার পরিবর্তে এটি করুন যা অনুরূপ আচরণের ফলস্বরূপ। যাইহোক, ট্রানজিশনটি অ্যানিমেশনের সাবসেটের মতো। এর সহজ অর্থ হ'ল রূপান্তর কিছু সমস্যার সমাধান করতে পারে অন্যদিকে অ্যানিমেশন সমস্ত সমস্যার সমাধান করতে পারে। অ্যানিমেশন আপনাকে 0% থেকে শুরু করে 100% পর্যন্ত প্রতিটি স্তরের নিয়ন্ত্রণ রাখতে সক্ষম করে যা এমন কিছু যা রূপান্তর আসলেই করতে পারে না। অ্যানিমেশনটির জন্য আপনাকে কোডের গুচ্ছ রচনার প্রয়োজন হয় যখন রূপান্তরটি আপনি কী কাজ করছেন তার উপর নির্ভর করে একই ফলাফলটি সম্পাদন করতে এক বা দুটি লাইন কোড ব্যবহার করে। জাভাস্ক্রিপ্টের দিক থেকে আসা, স্থানান্তরটি ব্যবহার করা ভাল। যে কোনও কিছু যা কেবল দুটি পর্যায়ে জড়িত থাকে যেমন ব্যবহার শুরু করুন এবং সমাপ্ত করুন। সংক্ষিপ্তসার, যদি এটি চাপযুক্ত ডন '