অ্যানিমেশন

CSS পডকাস্ট - 022: অ্যানিমেশন

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

আপনি কীফ্রেম সহ একটি অ্যানিমেশন সিকোয়েন্স সেট করতে CSS ব্যবহার করতে পারেন। এই ক্রমগুলি মৌলিক, এক-রাজ্য অ্যানিমেশন বা জটিল, সময়-ভিত্তিক ক্রম হতে পারে।

একটি কীফ্রেম কি?

বেশিরভাগ অ্যানিমেশন সরঞ্জামগুলিতে, কীফ্রেমগুলি হল সেই পদ্ধতি যা আপনি একটি টাইমলাইনে টাইমস্ট্যাম্পগুলিতে অ্যানিমেশন স্টেটগুলি বরাদ্দ করতে ব্যবহার করেন।

উদাহরণস্বরূপ, এখানে স্পন্দিত "সহায়ক" বিন্দুর জন্য একটি টাইমলাইন রয়েছে৷ অ্যানিমেশনটি 1 সেকেন্ডের জন্য চলে এবং এর 2টি রাজ্য রয়েছে।

একটি নির্দিষ্ট বিন্দু যেখানে এই অ্যানিমেশন স্টেটগুলির প্রতিটি শুরু এবং শেষ হয়। আপনি কীফ্রেমগুলির সাথে টাইমলাইনে এগুলি ম্যাপ করুন৷

@keyframes

CSS @keyframes অ্যানিমেশন কীফ্রেমের মতো একই ধারণার উপর ভিত্তি করে তৈরি।

এখানে দুটি রাজ্যের সাথে একটি উদাহরণ রয়েছে:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

প্রথম গুরুত্বপূর্ণ অংশটি হল কাস্টম শনাক্তকারী ( custom-ident ) , কীফ্রেম নিয়মের নাম। এই উদাহরণে শনাক্তকারী হল my-animation । কাস্টম শনাক্তকারী একটি ফাংশনের নামের মতো কাজ করে, আপনাকে আপনার CSS কোডের অন্য কোথাও কীফ্রেম নিয়ম উল্লেখ করতে দেয়।

কীফ্রেম নিয়মের মধ্যে, from এবং to কীওয়ার্ডগুলি 0% এবং 100% প্রতিনিধিত্ব করে, যা অ্যানিমেশনের শুরু এবং শেষ। আপনি এই মত একই নিয়ম পুনরায় তৈরি করতে পারেন:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation বৈশিষ্ট্য

একটি CSS নিয়মে আপনার @keyframes ব্যবহার করতে, আপনি হয় পৃথকভাবে বিভিন্ন অ্যানিমেশন বৈশিষ্ট্য সংজ্ঞায়িত করতে পারেন, অথবা animation শর্টহ্যান্ড বৈশিষ্ট্য ব্যবহার করতে পারেন।

animation-duration

.my-element {
    animation-duration: 10s;
}

অ্যানিমেশন-সময়কাল বৈশিষ্ট্য নির্ধারণ করে যে @keyframes টাইমলাইন একটি সময়ের মান হিসাবে কতক্ষণ হওয়া উচিত। এটি 0 সেকেন্ডে ডিফল্ট, যার মানে অ্যানিমেশন এখনও চলে, কিন্তু এটি দেখতে আপনার পক্ষে খুব দ্রুত হবে৷ আপনি নেতিবাচক সময় মান ব্যবহার করতে পারবেন না.

animation-timing-function

অ্যানিমেশনে প্রাকৃতিক গতি পুনরায় তৈরি করতে সাহায্য করার জন্য, আপনি টাইমিং ফাংশন ব্যবহার করতে পারেন যা প্রতিটি পয়েন্টে অ্যানিমেশনের গতি গণনা করে। গণনা করা মানগুলি প্রায়শই বাঁকা হয়, যার ফলে অ্যানিমেশনটি animation-duration ধরে পরিবর্তনশীল গতিতে চলে এবং যদি ব্রাউজার @keyframes এ সংজ্ঞায়িত মানগুলির বাইরে একটি মান গণনা করে তাহলে উপাদানটি বাউন্স হতে দেখা যায়।

CSS-এ প্রিসেট হিসেবে বেশ কিছু কীওয়ার্ড পাওয়া যায়, যেগুলো অ্যানিমেশন-টাইমিং-ফাংশনের মান হিসেবে ব্যবহার করা হয়: linear , ease , ease-in , ease-out , ease-in-out ।

.my-element {
    animation-timing-function: ease-in-out;
}

ইজিং ফাংশনের মানগুলি বক্ররেখায় প্রদর্শিত হয় কারণ ইজিং একটি বেজিয়ার বক্ররেখা ব্যবহার করে গণনা করা হয়, একটি প্রকারের ফাংশন যা বেগের মডেল করতে ব্যবহৃত হয়। প্রতিটি টাইমিং ফাংশন কীওয়ার্ড, যেমন ease , একটি পূর্বনির্ধারিত বেজিয়ার বক্ররেখা উল্লেখ করে। CSS-এ, আপনি cubic-bezier() ফাংশন ব্যবহার করে সরাসরি একটি Bézier বক্ররেখা সংজ্ঞায়িত করতে পারেন, যা চারটি সংখ্যা মান গ্রহণ করে: x1 , y1 , x2 , y2 ।

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

এই মানগুলি X এবং Y অক্ষ বরাবর বক্ররেখার প্রতিটি অংশকে প্লট করে।

বেজিয়ার কার্ভ বোঝা জটিল। ভিজ্যুয়াল টুল, যেমন Lea Verou দ্বারা এই জেনারেটর , খুব সহায়ক।

steps সহজীকরণ ফাংশন

কখনও কখনও আপনি একটি বক্ররেখা বরাবর পরিবর্তে বিরতিতে সরানোর মাধ্যমে আপনার অ্যানিমেশনের আরও দানাদার নিয়ন্ত্রণ নিতে চাইতে পারেন। steps() ইজিং ফাংশন আপনাকে টাইমলাইনকে সমান সময়কালের নির্দিষ্ট ব্যবধানে ভাঙতে দেয়।

.my-element {
    animation-timing-function: steps(10, end);
}

প্রথম যুক্তি হল সংখ্যা ধাপ। যদি ধাপগুলির মতো একই সংখ্যক কীফ্রেম থাকে, তবে প্রতিটি কীফ্রেম তার ধাপের সঠিক সময়কালের জন্য ক্রমানুসারে বাজবে, রাজ্যগুলির মধ্যে কোনও রূপান্তর ছাড়াই। ধাপের তুলনায় কম কীফ্রেম থাকলে, ব্রাউজার দ্বিতীয় আর্গুমেন্টের উপর নির্ভর করে কীফ্রেমের মধ্যে ধাপ যোগ করে।

দ্বিতীয় যুক্তি হল দিক। যদি এটি end সেট করা থাকে, যা ডিফল্ট, পদক্ষেপগুলি আপনার টাইমলাইনের শেষে শেষ হয়৷ এটি start জন্য সেট করা থাকলে, আপনার অ্যানিমেশনের প্রথম ধাপটি শুরু হওয়ার সাথে সাথেই শেষ হয়ে যায়, যার মানে এটি end থেকে এক ধাপ আগে শেষ হয়।

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

অ্যানিমেশন-পুনরাবৃত্তি-গণনা বৈশিষ্ট্য অ্যানিমেশনের সময় @keyframes টাইমলাইন কতবার চালানো উচিত তা নির্ধারণ করে। ডিফল্টরূপে, এটি 1, যার অর্থ হল অ্যানিমেশনটি আপনার টাইমলাইনের শেষের দিকে পৌঁছালে তা বন্ধ হয়ে যায়। এই মান একটি ঋণাত্মক সংখ্যা হতে পারে না.

আপনার অ্যানিমেশন লুপ করতে, পুনরাবৃত্তি গণনা infinite সেট করুন। এই পাঠের শুরু থেকে স্পন্দিত অ্যানিমেশন এইভাবে কাজ করে।

animation-direction

.my-element {
    animation-direction: reverse;
}

আপনি অ্যানিমেশন-নির্দেশ সহ আপনার কীফ্রেমের উপর টাইমলাইন কোন দিকটি চলে তা সেট করতে পারেন, যা নিম্নলিখিত মানগুলি নেয়:

• normal : ডিফল্ট মান, যা ফরোয়ার্ড।
• reverse : আপনার টাইমলাইনে পিছনে চলে।
• alternate : প্রতিটি অ্যানিমেশন পুনরাবৃত্তির জন্য, টাইমলাইনটি সামনের দিকে দৌড়ানো এবং পিছনের দিকে দৌড়ানোর মধ্যে বিকল্প হয়।
• alternate-reverse : alternate মতো, কিন্তু অ্যানিমেশনটি টাইমলাইন পিছিয়ে চলার সাথে শুরু হয়।

animation-delay

.my-element {
    animation-delay: 5s;
}

অ্যানিমেশন-বিলম্ব বৈশিষ্ট্য নির্ধারণ করে যে অ্যানিমেশন শুরু করার আগে ব্রাউজার কতক্ষণ অপেক্ষা করে। animation-duration বৈশিষ্ট্যের মতো, এটি একটি সময় মান গ্রহণ করে।

animation-duration বিপরীতে, আপনি animation-delay একটি নেতিবাচক মান হিসাবে সংজ্ঞায়িত করতে পারেন , যা আপনার টাইমলাইনের সংশ্লিষ্ট বিন্দুতে অ্যানিমেশন শুরু করে। উদাহরণস্বরূপ, যদি আপনার অ্যানিমেশন 10 সেকেন্ড দীর্ঘ হয় এবং আপনি animation-delay -5s সেট করেন, তাহলে অ্যানিমেশন আপনার টাইমলাইনের অর্ধেক থেকে শুরু হয়।

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

অ্যানিমেশন-প্লে-স্টেট সম্পত্তি আপনাকে অ্যানিমেশন খেলতে এবং বিরতি দিতে দেয়। ডিফল্ট মান running । আপনি যদি এটিকে paused সেট করেন, অ্যানিমেশনটি বিরতি দেয়।

animation-fill-mode

অ্যানিমেশন-ফিল-মোড প্রপার্টি অ্যানিমেশন শুরু হওয়ার আগে বা শেষ হওয়ার পরে আপনার @keyframes টাইমলাইনে কোন মানগুলি বজায় থাকবে তা নির্ধারণ করে। ডিফল্ট মান none , যার অর্থ হল অ্যানিমেশন সম্পূর্ণ হলে, আপনার টাইমলাইনে থাকা মানগুলি বাতিল করা হবে৷ অন্যান্য বিকল্প অন্তর্ভুক্ত:

• forwards : অ্যানিমেশন দিকনির্দেশের উপর ভিত্তি করে শেষ কীফ্রেমটি টিকে থাকে।
• backwards : অ্যানিমেশন দিকনির্দেশের উপর ভিত্তি করে প্রথম কীফ্রেমটি টিকে থাকে।
• both : প্রথম এবং শেষ উভয় কীফ্রেমই টিকে থাকে।

animation শর্টহ্যান্ড

প্রতিটি সম্পত্তি আলাদাভাবে সংজ্ঞায়িত করার পরিবর্তে, আপনি একটি animation শর্টহ্যান্ডে তাদের সংজ্ঞায়িত করতে পারেন, যা আপনাকে নিম্নলিখিত ক্রমে অ্যানিমেশন বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে দেয়:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

অ্যানিমেশন নিয়ে কাজ করার সময় বিবেচনা করুন

অ্যাপ্লিকেশন এবং ওয়েবসাইটগুলির সাথে ইন্টারঅ্যাক্ট করার সময় ব্যবহারকারীরা তাদের অপারেটিং সিস্টেমকে কম গতিতে পছন্দ করতে সেট করতে পারেন। আপনি prefers-reduced-motion media ক্যোয়ারী ব্যবহার করে এই পছন্দটি সনাক্ত করতে পারেন:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

এটি অগত্যা কোন অ্যানিমেশন জন্য একটি পছন্দ নয়. এটি কম অ্যানিমেশনের জন্য একটি পছন্দ, বিশেষ করে কম অপ্রত্যাশিত অ্যানিমেশন। আপনি আমাদের অ্যানিমেশন গাইডে এই পছন্দ এবং সামগ্রিক কর্মক্ষমতা সম্পর্কে আরও জানতে পারেন৷

আপনার উপলব্ধি পরীক্ষা করুন

অ্যানিমেশন আপনার জ্ঞান পরীক্ষা করুন