অ্যানিমেশন-কম্পোজিশন ব্যবহার করে একাধিক অ্যানিমেশন ইফেক্ট একত্রিত করুন

Bramus

animation-composition প্রপার্টিটি নিয়ন্ত্রণ করে যে, একাধিক অ্যানিমেশন একই সাথে একই প্রপার্টিকে প্রভাবিত করলে কী ঘটবে।

ধরুন, আপনি একটি এলিমেন্টে এই বেস ট্রান্সফর্মটি প্রয়োগ করেছেন:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

এবং আপনার কাছে এই কীফ্রেম সেটটিও আছে:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

কোনো এলিমেন্টে এই কীফ্রেমগুলো প্রয়োগ করার সময়, to কীফ্রেমের ভেতরের transform বিদ্যমান transform প্রতিস্থাপন করে। এটিই ডিফল্ট আচরণ।

animation-composition সাহায্যে, ডিফল্ট replace পরিবর্তে কী ঘটবে, তা এখন আপনি নিয়ন্ত্রণ করতে পারবেন। গ্রহণযোগ্য মানগুলো হলো:

• replace : কার্যকর মানটি অন্তর্নিহিত মানকে প্রতিস্থাপন করে। (ডিফল্ট)
• add : প্রভাব মানটি অন্তর্নিহিত মানের সাথে যোগ করা হয়।
• accumulate : প্রভাব মানটি অন্তর্নিহিত মানের সাথে একত্রিত করা হয়।

যোগ এবং সঞ্চয়ের মধ্যে পার্থক্য সূক্ষ্ম। উদাহরণস্বরূপ, blur(2) এবং blur(3) এই দুটি মান নিন। যখন এদেরকে একসাথে যোগ করা হয় তখন blur(2) blur(3) পাওয়া যায়, কিন্তু যখন এদের সঞ্চয় করা হয় তখন blur(5) পাওয়া যায়।

আপনি এটিকে চা ভর্তি একটি কাপের সাথে তুলনা করতে পারেন। এতে দুধ ঢালার সময় এই ঘটনাটি ঘটবে:

• replace : চা সরিয়ে ফেলা হয় এবং তার পরিবর্তে দুধ দেওয়া হয়।
• add : কাপে দুধ যোগ করা হয়, কিন্তু তা চায়ের উপরে একটি স্তর হিসেবে থেকে যায়।
• accumulate : চায়ের মধ্যে দুধ মেশানো হয় এবং উভয়ই তরল হওয়ায় তা সুন্দরভাবে মিশে যায়।

ডেমো

ডেমোটিতে তিনটি ধূসর বাক্স রয়েছে, যেগুলোতে ওই বেস transform এবং animation প্রয়োগ করা হয়েছে।

যদিও এই বক্সগুলোর অ্যানিমেশন একই, তবুও এগুলোর ফলাফল ভিন্ন হয়, কারণ এগুলোর animation-composition সেট আলাদা:

প্রথম বক্সটি animation-composition: replace এ সেট করা আছে। এটিই ডিফল্ট আচরণ। এর শেষ অবস্থানে, transform জন্য আসল translateX(50px) rotate(45deg) মানটি translateX(100px) দ্বারা প্রতিস্থাপিত হয়।

দ্বিতীয় বক্সটিতে animation-composition: add সেট করা আছে। এর শেষ অবস্থানে, মূল translateX(50px) rotate(45deg) এর সাথে translateX(100px) ) যোগ করা হয়, যার ফলে translateX(50px) rotate(45deg) translateX(100px) । এটি বক্সটিকে প্রথমে 50px সরায়, তারপর 45deg ঘোরায় এবং সবশেষে 100px সরায়।

তৃতীয় বক্সটির animation-composition: accumulate সেট করা আছে। এর শেষ অবস্থানে, মূল ট্রান্সফর্মের translateX(100px) এর সাথে translateX(50px) গাণিতিকভাবে যোগ করা হবে, যার ফলে translateX(150px) rotate(45deg) ট্রান্সফর্মেশনটি তৈরি হবে।