অ্যানিমেশন ইন্টারেক্টিভ উপাদানগুলিকে হাইলাইট করার এবং আপনার ডিজাইনগুলিতে আগ্রহ এবং মজা যোগ করার একটি দুর্দান্ত উপায়। এই মডিউলে সিএসএস-এর সাহায্যে অ্যানিমেশন প্রভাবগুলি কীভাবে যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায় তা জানুন।
কখনও কখনও আপনি ইন্টারফেসে সামান্য সাহায্যকারী দেখতে পান যেগুলি ক্লিক করার সময়, সেই নির্দিষ্ট বিভাগ সম্পর্কে কিছু সহায়ক তথ্য প্রদান করে। এগুলিতে প্রায়শই একটি স্পন্দনশীল অ্যানিমেশন থাকে যা আপনাকে সূক্ষ্মভাবে জানাতে পারে যে তথ্য রয়েছে এবং এর সাথে যোগাযোগ করা উচিত। যদিও আপনি সিএসএস দিয়ে এটি কীভাবে করবেন?
CSS-এ, আপনি CSS অ্যানিমেশন ব্যবহার করে এই ধরনের অ্যানিমেশন তৈরি করতে পারেন, যা আপনাকে কীফ্রেম ব্যবহার করে অ্যানিমেশন সিকোয়েন্স সেট করতে দেয়। অ্যানিমেশনগুলি সহজ হতে পারে, একটি রাষ্ট্রীয় অ্যানিমেশন বা এমনকি জটিল, সময়-ভিত্তিক ক্রম।
একটি কীফ্রেম কি?
অ্যানিমেশন সফ্টওয়্যার, CSS এবং অন্যান্য বেশিরভাগ সরঞ্জামগুলিতে যা আপনাকে কিছু অ্যানিমেট করতে সক্ষম করে, কীফ্রেমগুলি হল সেই পদ্ধতি যা আপনি একটি টাইমলাইনে টাইমস্ট্যাম্পগুলিতে অ্যানিমেশন স্টেটগুলি বরাদ্দ করতে ব্যবহার করেন৷
এর জন্য একটি প্রসঙ্গ হিসাবে "pulser" ব্যবহার করা যাক। পুরো অ্যানিমেশনটি 1 সেকেন্ডের জন্য চলে এবং 2টি রাজ্যে চলে।
একটি নির্দিষ্ট বিন্দু যেখানে এই অ্যানিমেশন স্টেটগুলির প্রতিটি শুরু এবং শেষ হয়। আপনি কীফ্রেমগুলির সাথে টাইমলাইনে এগুলি ম্যাপ করুন৷
@keyframes
এখন আপনি জানেন কীফ্রেম কী, সেই জ্ঞান আপনাকে CSS @keyframes নিয়ম কীভাবে কাজ করে তা বুঝতে সাহায্য করবে। এখানে দুটি রাজ্যের সাথে একটি মৌলিক নিয়ম রয়েছে।
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
উল্লেখ্য প্রথম অংশটি হল কাস্টম আইডেন্টিটি (কাস্টম আইডেন্টিফায়ার)-অথবা আরও মানবিক ভাষায়, কীফ্রেম নিয়মের নাম৷ এই নিয়মের শনাক্তকারী হল my-animation । কাস্টম শনাক্তকারী একটি ফাংশন নামের মত কাজ করে। যা, আপনি যেমন ফাংশন মডিউলে শিখেছেন, আপনাকে আপনার CSS কোডের অন্য কোথাও কীফ্রেম নিয়ম উল্লেখ করতে দেয়।
কীফ্রেম নিয়মের মধ্যে, from এবং to কীওয়ার্ডগুলি 0% এবং 100% প্রতিনিধিত্ব করে, যা অ্যানিমেশনের শুরু এবং শেষ। আপনি এই মত একই নিয়ম পুনরায় তৈরি করতে পারেন:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
আপনি টাইমফ্রেম বরাবর আপনার পছন্দ অনুযায়ী অনেক পজিশন যোগ করতে পারেন। "পালসার" উদাহরণের প্রসঙ্গ ব্যবহার করে, 2টি অবস্থা আছে, যা 2টি কীফ্রেমে অনুবাদ করে। এর মানে হল এই প্রতিটি কীফ্রেমের পরিবর্তনগুলি উপস্থাপন করার জন্য আপনার কীফ্রেমের নিয়মের মধ্যে আপনার 2টি অবস্থান রয়েছে।
@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 এ সংজ্ঞায়িত মানের চেয়ে বেশি গণনা করা হয়, তাহলে উপাদানটি বাউন্স হতে দেখা যায়।
সিএসএস-এ প্রিসেট হিসাবে বেশ কিছু কীওয়ার্ড উপলব্ধ রয়েছে, যেগুলি অ্যানিমেশন-টাইমিং-ফাংশনের মান হিসাবে ব্যবহৃত হয়: 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);
}
প্রথম যুক্তি হল কয়টি ধাপ। যদি ধাপগুলি 10 হিসাবে সংজ্ঞায়িত করা হয় এবং 10টি কীফ্রেম থাকে, তবে প্রতিটি কীফ্রেম সঠিক সময়ের জন্য ক্রমানুসারে চলবে, রাজ্যগুলির মধ্যে কোনও রূপান্তর ছাড়াই৷ ধাপগুলির জন্য পর্যাপ্ত কীফ্রেম না থাকলে, দ্বিতীয় আর্গুমেন্টের উপর নির্ভর করে কীফ্রেমের মধ্যে ধাপগুলি যোগ করা হয়।
দ্বিতীয় যুক্তি হল দিক। যদি এটি 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 বৈশিষ্ট্যের বিপরীতে, আপনি এটিকে একটি নেতিবাচক মান হিসাবে সংজ্ঞায়িত করতে পারেন । যদি আপনি একটি নেতিবাচক মান সেট করেন, আপনার @keyframes এর টাইমলাইন সেই সময়ে শুরু হবে। উদাহরণস্বরূপ, যদি আপনার অ্যানিমেশন 10 সেকেন্ড দীর্ঘ হয় এবং আপনি animation-delay -5s সেট করেন, তাহলে এটি আপনার টাইমলাইন বরাবর অর্ধেক পথ থেকে শুরু হবে।
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
অ্যানিমেশন-প্লে-স্টেট সম্পত্তি আপনাকে অ্যানিমেশন খেলতে এবং বিরতি দেওয়ার অনুমতি দেয়। ডিফল্ট মান running এবং আপনি যদি এটিকে paused সেট করেন তবে এটি অ্যানিমেশনটিকে বিরতি দেবে।
animation-fill-mode
অ্যানিমেশন-ফিল-মোড প্রপার্টি অ্যানিমেশন শুরু হওয়ার আগে বা শেষ হওয়ার পরে আপনার @keyframes টাইমলাইনে কোন মানগুলি বজায় থাকবে তা নির্ধারণ করে। ডিফল্ট মান none যার মানে অ্যানিমেশন সম্পূর্ণ হলে, আপনার টাইমলাইনের মানগুলি বাতিল করা হয়। অন্যান্য বিকল্প হল:
-
forwards: অ্যানিমেশন দিকনির্দেশের উপর ভিত্তি করে শেষ কীফ্রেমটি টিকে থাকবে। -
backwards: অ্যানিমেশন দিকনির্দেশের উপর ভিত্তি করে প্রথম কীফ্রেমটি টিকে থাকবে। -
both:forwardsএবংbackwardsউভয়ের জন্য নিয়ম অনুসরণ করে।
animation শর্টহ্যান্ড
সমস্ত বৈশিষ্ট্য আলাদাভাবে সংজ্ঞায়িত করার পরিবর্তে, আপনি একটি animation শর্টহ্যান্ডে তাদের সংজ্ঞায়িত করতে পারেন, যা আপনাকে নিম্নলিখিত ক্রমে অ্যানিমেশন বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে দেয়:
-
animation-name -
animation-duration -
animation-timing-function -
animation-delay -
animation-iteration-count -
animation-direction -
animation-fill-mode -
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
অ্যানিমেশন নিয়ে কাজ করার সময় বিবেচনা করুন
ব্যবহারকারীরা তাদের অপারেটিং সিস্টেমে সংজ্ঞায়িত করতে পারে যে তারা অ্যাপ্লিকেশন এবং ওয়েবসাইটগুলির সাথে ইন্টারঅ্যাক্ট করার সময় অভিজ্ঞতার গতি কমাতে পছন্দ করে। এই পছন্দটি prefers-reduced-motion media query ব্যবহার করে সনাক্ত করা যেতে পারে।
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
এটি অগত্যা কোন অ্যানিমেশনের পছন্দ নয়, বরং, অ্যানিমেশনগুলি কমাতে একটি অগ্রাধিকার- বিশেষ করে অপ্রত্যাশিত । আপনি এই অ্যানিমেশন গাইডের মাধ্যমে এই পছন্দ এবং সামগ্রিক কর্মক্ষমতা সম্পর্কে আরও জানতে পারেন।
আপনার উপলব্ধি পরীক্ষা করুন
অ্যানিমেশন আপনার জ্ঞান পরীক্ষা করুন
@keyframes অ্যানিমেশনের নাম বা কাস্টম শনাক্তকারী কেস সংবেদনশীল?
SWOOP এবং swoop কে সহাবস্থান করতে দেয়। from এবং to কীওয়ার্ড একই রকম
start এবং end0% এবং 100% ।from 0% এর সমান এবং to 100% এর সমান।0 এবং 1 animation-timing-function সাধারণভাবে নামেও পরিচিত
@keyframes অ্যানিমেশনের মধ্যে ন্যূনতম কত কী ফ্রেম প্রয়োজন?