উচ্চ-পারফরম্যান্স CSS অ্যানিমেশনের উদাহরণ

Rachel Andrew

এই পোস্টে কোডপেনে পাওয়া কিছু জনপ্রিয় অ্যানিমেশন কীভাবে তৈরি করা হয়েছে তা জানুন। এই অ্যানিমেশনগুলি এই বিভাগের অন্যান্য নিবন্ধগুলিতে আলোচিত পারফর্ম্যান্স কৌশলগুলি ব্যবহার করে।

এই সুপারিশগুলির পিছনে তত্ত্ব জানতে কিছু অ্যানিমেশন কেন ধীর? দেখুন, এবং ব্যবহারিক টিপসের জন্য অ্যানিমেশন গাইড দেখুন ।

উইজার্ড লোডিং অ্যানিমেশন

কোডপেনে উইজার্ড লোডিং অ্যানিমেশন দেখুন

এই লোডিং অ্যানিমেশনটি সম্পূর্ণরূপে CSS দিয়ে তৈরি। ছবিটি এবং সমস্ত অ্যানিমেশন CSS এবং HTML ব্যবহার করে তৈরি করা হয়েছে, কোনও ছবি বা জাভাস্ক্রিপ্ট ব্যবহার করা হয়নি। এটি কীভাবে তৈরি করা হয়েছে এবং এটি কতটা ভালোভাবে কাজ করে তা বোঝার জন্য আপনি Chrome DevTools ব্যবহার করতে পারেন।

Chrome DevTools দিয়ে অ্যানিমেশনটি পরীক্ষা করুন

অ্যানিমেশনটি চালু থাকা অবস্থায়, Chrome DevTools-এ Performance ট্যাবটি খুলুন এবং অ্যানিমেশনের কয়েক সেকেন্ড রেকর্ড করুন। আপনি সারাংশে দেখতে পাবেন যে এই অ্যানিমেশনটি চালানোর সময় ব্রাউজারটি কোনও লেআউট বা পেইন্ট অপারেশন করছে না।

লেআউট এবং পেইন্ট ছাড়াই এই অ্যানিমেশনটি কীভাবে অর্জন করা হয়েছে তা জানতে, Chrome DevTools-এর যেকোনো চলমান উপাদান পরীক্ষা করুন। আপনি বিভিন্ন অ্যানিমেটেড উপাদানগুলি সনাক্ত করতে অ্যানিমেশন প্যানেল ব্যবহার করতে পারেন, যেকোনো উপাদানের উপর ক্লিক করলে এটি DOM-এ হাইলাইট হবে।

উদাহরণস্বরূপ, ত্রিভুজটি নির্বাচন করুন, এবং দেখুন কিভাবে উপাদানটির বাক্সটি বাতাসে যাত্রার সময় রূপান্তরিত হয়, যখন এটি ঘুরতে থাকে এবং তারপর শুরুর অবস্থানে ফিরে আসে।

এলিমেন্টটি এখনও নির্বাচিত থাকা অবস্থায় স্টাইল প্যানেলটি দেখুন। সেখানে আপনি ত্রিভুজের আকৃতি আঁকতে ব্যবহৃত CSS এবং ব্যবহৃত অ্যানিমেশন দেখতে পাবেন।

কিভাবে এটা কাজ করে

ত্রিভুজটি তৈরি করা হয় ::after pseudo-element ব্যবহার করে জেনারেটেড কন্টেন্ট যোগ করে, আকৃতি তৈরি করতে সীমানা ব্যবহার করে।

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

অ্যানিমেশনটি CSS এর নিম্নলিখিত লাইনের সাথে যুক্ত করা হয়েছে,

animation: path_triangle 10s ease-in-out infinite;

Chrome DevTools-এ থাকাকালীন আপনি স্টাইল প্যানেলে স্ক্রোল করে কীফ্রেমগুলি খুঁজে পেতে পারেন। সেখানে আপনি দেখতে পাবেন যে transform ব্যবহার করে এলিমেন্টের অবস্থান পরিবর্তন করে এবং এটি ঘোরানোর মাধ্যমে অ্যানিমেশন তৈরি করা হয়েছে। transform প্রপার্টি হল অ্যানিমেশন গাইডে বর্ণিত বৈশিষ্ট্যগুলির মধ্যে একটি, যা ব্রাউজারকে লেআউট বা পেইন্ট অপারেশন করতে বাধ্য করে না (যা ধীর অ্যানিমেশনের প্রধান কারণ)।

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

এই অ্যানিমেশনের প্রতিটি চলমান অংশ একই রকম কৌশল ব্যবহার করে। ফলাফল হল একটি জটিল অ্যানিমেশন যা মসৃণভাবে চলে।

স্পন্দিত বৃত্ত

কোডপেনে স্পন্দিত বৃত্ত দেখুন

এই ধরণের অ্যানিমেশন কখনও কখনও কোনও পৃষ্ঠার কোনও কিছুর প্রতি দৃষ্টি আকর্ষণ করার জন্য ব্যবহৃত হয়। অ্যানিমেশনটি বোঝার জন্য আপনি Firefox DevTools ব্যবহার করতে পারেন।

Firefox DevTools দিয়ে অ্যানিমেশনটি পরীক্ষা করুন

অ্যানিমেশন চালু থাকা অবস্থায়, Firefox DevTools-এ Performance ট্যাবটি খুলুন এবং অ্যানিমেশনের কয়েক সেকেন্ড রেকর্ড করুন। রেকর্ডিং বন্ধ করুন, জলপ্রপাতটিতে আপনি দেখতে পাবেন যে Recalculate Style এর জন্য কোনও এন্ট্রি নেই। আপনি এখন জানেন যে এই অ্যানিমেশনটি স্টাইল পুনঃগণনা করে না, এবং তাই লেআউট এবং পেইন্ট অপারেশন করে না।

ফায়ারফক্সে থাকাকালীন DevTools বৃত্তটি পরিদর্শন করে দেখতে পারে যে এই অ্যানিমেশনটি কীভাবে কাজ করে। <div> এর একটি ক্লাস pulsating-circle সহ বৃত্তের অবস্থান চিহ্নিত করে, তবে এটি নিজেই একটি বৃত্ত আঁকে না।

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

দৃশ্যমান বৃত্ত এবং অ্যানিমেশনগুলি ::before এবং ::after ছদ্ম-উপাদান ব্যবহার করে অর্জন করা হয়।

::before এলিমেন্টটি pulse-ring নামক একটি অ্যানিমেশন ব্যবহার করে সাদা বৃত্তের বাইরে প্রসারিত অস্বচ্ছ রিং তৈরি করে, যা transform: scale এবং opacity অ্যানিমেট করে।

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

কোন কোন বৈশিষ্ট্য অ্যানিমেটেড হচ্ছে তা দেখার আরেকটি উপায় হল Firefox DevTools-এ Animations প্যানেল নির্বাচন করা। এরপর আপনি ব্যবহৃত অ্যানিমেশন এবং অ্যানিমেটেড হচ্ছে এমন বৈশিষ্ট্যগুলির একটি ভিজ্যুয়ালাইজেশন দেখতে পাবেন।

সাদা বৃত্তটি নিজেই তৈরি এবং অ্যানিমেটেড করা হয় ::after pseudo-element ব্যবহার করে। অ্যানিমেশন pulse-dot অ্যানিমেশনের সময় বিন্দুটি বৃদ্ধি এবং সঙ্কুচিত করার জন্য transform: scale ব্যবহার করে।

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

এই ধরণের অ্যানিমেশন আপনার অ্যাপ্লিকেশনের বিভিন্ন জায়গায় ব্যবহার করা যেতে পারে, তবে এই ছোটখাটো কাজগুলো যেন আপনার অ্যাপের সামগ্রিক কর্মক্ষমতার উপর প্রভাব না ফেলে, তা গুরুত্বপূর্ণ।

বিশুদ্ধ CSS 3D স্ফিয়ার

কোডপেনে পিওর সিএসএস থ্রিডি স্ফিয়ার দেখুন

এই অ্যানিমেশনটি অবিশ্বাস্যরকম জটিল বলে মনে হচ্ছে, তবে এটি এমন কৌশল ব্যবহার করে যা আমরা পূর্ববর্তী উদাহরণগুলিতে ইতিমধ্যেই দেখেছি। জটিলতাটি আসে বিপুল সংখ্যক উপাদান অ্যানিমেট করার মাধ্যমে।

Chrome DevTools খুলুন এবং plane শ্রেণীর উপাদানগুলির মধ্যে একটি নির্বাচন করুন। গোলকটি ঘূর্ণায়মান সমতল এবং স্পোকের একটি সেট দিয়ে তৈরি।

এই প্লেন এবং স্পোকগুলি একটি র‍্যাপারের ভিতরে থাকে <div> , এবং এই উপাদানটিই transform: rotate3d ব্যবহার করে ঘোরানো হয়।

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

বিন্দুগুলি plane এবং spoke উপাদানের ভিতরে অবস্থিত পাওয়া যেতে পারে, তারা একটি অ্যানিমেশন ব্যবহার করে যা তাদের স্কেল এবং অনুবাদ করতে ট্রান্সফর্ম ব্যবহার করে। এটি পালসিং প্রভাব তৈরি করে।

.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

এই অ্যানিমেশনটি তৈরির সাথে জড়িত কাজটি ছিল সঠিক সময় নির্ধারণ করা, বাঁক এবং পালসিং প্রভাব তৈরি করা। অ্যানিমেশনগুলি নিজেই বেশ সহজ, এবং এমন পদ্ধতি ব্যবহার করে যা খুব ভাল পারফর্ম করে।

এই অ্যানিমেশনটি কেমন কাজ করে তা আপনি Chrome DevTools খুলে এবং চলমান অবস্থায় Performance রেকর্ড করে দেখতে পারেন। প্রাথমিক লোডের পরে, অ্যানিমেশনটি Layout বা Paint ট্রিগার করে না এবং মসৃণভাবে চলে।

উপসংহার

এই উদাহরণগুলি থেকে আপনি দেখতে পাবেন যে পারফর্ম্যান্ট পদ্ধতি ব্যবহার করে কয়েকটি বৈশিষ্ট্য অ্যানিমেট করলে কীভাবে কিছু দুর্দান্ত অ্যানিমেশন তৈরি হতে পারে। অ্যানিমেশন গাইডে বর্ণিত পারফর্ম্যান্ট পদ্ধতিগুলি ডিফল্টভাবে ব্যবহার করে আপনি আপনার পছন্দসই প্রভাব তৈরি করতে আপনার সময় ব্যয় করতে পারেন, পৃষ্ঠাটি ধীর করার বিষয়ে কম উদ্বেগ ছাড়াই।