অ্যানিমেশন-কম্পোজিশনের সাথে একাধিক অ্যানিমেশন প্রভাব কীভাবে সংমিশ্রিত হওয়া উচিত তা নির্দিষ্ট করুন

প্রতিস্থাপন, যোগ, বা জমা? এটাই প্রশ্ন।

ব্রামাস

একাধিক অ্যানিমেশন প্রভাব সমন্বয়

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

ব্রাউজার সমর্থন

  • ক্রোম: 112।
  • প্রান্ত: 112।
  • ফায়ারফক্স: 115।
  • সাফারি: 16।

উৎস

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

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(100px) মূল translateX(50px) rotate(45deg) এ যোগ করা হয়, যার ফলে translateX(50px) rotate(45deg) translateX(100px) হয়। এটি বাক্সটিকে 50px দ্বারা সরায়, তারপর এটি 45deg ঘুরিয়ে দেয় এবং তারপরে এটি 100px সরে যায়।

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

আনস্প্ল্যাশে অ্যালেক্স বয়েডের ছবি