অ্যানিমেশন সম্পর্কিত CSS বৈশিষ্ট্যগুলি
এই প্রবন্ধে অ্যানিমেশন সম্পর্কিত CSS বৈশিষ্ট্যগুলি ব্যাখ্যা করা হয়েছে।
আপনি @keyframes, animation, এবং transition বৈশিষ্ট্যগুলির ব্যবহার এবং গঠন সম্পর্কে শিখতে পারেন।
YouTube Video
প্রিভিউর জন্য HTML
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>অ্যানিমেশন এবং ট্রানজিশন
@keyframes নিয়ম
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframes CSS অ্যানিমেশনে ব্যবহার করা হয় অ্যানিমেশনের সময় স্টাইলগুলি কীভাবে পরিবর্তিত হয় তা নির্দিষ্ট করতে। @keyframes-এ, অ্যানিমেশনের শুরু থেকে শেষ পর্যন্ত স্টাইল পরিবর্তনগুলিকে সময়ের শতাংশ বা কীওয়ার্ড (উদাহরণস্বরূপ, from এবং to) দ্বারা নির্দিষ্ট করা হয়।
- এটি একটি উদাহরণ যেখানে একটি এলিমেন্ট বাম থেকে ডানদিকে স্লাইড করে এবং তার মূল অবস্থানে ফিরে যায়।
- এই উদাহরণে,
@keyframes-এর পরেslideলেখা হয়েছে, যা একটিslideনামক অ্যানিমেশন নির্ধারণ করে। 0%হল অ্যানিমেশনের শুরু, যেখানেtranslateX(0)এলিমেন্টটিকে তার মূল অবস্থানে স্থাপন করে।50%হল অ্যানিমেশনের মাঝামাঝি, যেখানে এলিমেন্টটিtranslateX(200px)ব্যবহার করে ডানদিকে ২০০px সরে যায়।100%হল অ্যানিমেশনের শেষ, যেখানে এলিমেন্টটি তার মূল অবস্থানে ফিরে আসে।box-animation-slideক্লাসে,animationবৈশিষ্ট্যটি ব্যবহৃত হয়েছেslideঅ্যানিমেশনটি ৩ সেকেন্ডের ব্যবধানে প্রয়োগ করার জন্য।
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- আপনি অ্যানিমেশনের সময় স্টাইলগুলিকে সূক্ষ্মভাবে নিয়ন্ত্রণ করতে পারেন। শতাংশ নির্দিষ্ট করে, আপনি ইচ্ছাকৃত সময়গুলোতে বিভিন্ন স্টাইল প্রয়োগ করতে পারেন।
- এই উদাহরণে, রংটি লাল থেকে নীল, নীল থেকে সবুজ, সবুজ থেকে হলুদ এবং হলুদ থেকে আবার লালে পরিবর্তিত হয়।
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- এই উদাহরণে,
fromমানে0%এবংtoমানে100%। এটি আপনাকে সহজ অ্যানিমেশন নির্ধারণ করতে সক্ষম করে।
মূল সিনট্যাক্স
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name: অ্যানিমেশনের নাম। এটিanimationপ্রপার্টি অথবাanimation-nameপ্রপার্টি ব্যবহার করে নির্দিষ্ট করা হয়।- শতাংশ বা কীওয়ার্ড:
0%থেকে100%এর মধ্যে শতাংশ ব্যবহার করুন, অথবা কীওয়ার্ডfrom(যা0%এর সমান) এবংto(যা100%এর সমান)।
animation বৈশিষ্ট্য
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}animation প্রপার্টি একটি উপাদানের উপর এনিমেশন প্রয়োগ করতে ব্যবহৃত হয়। এনিমেশনগুলি সময়ের সাথে সাথে CSS স্টাইলের একটি সেট কীভাবে পরিবর্তিত হবে তা নির্ধারণ করে। animation প্রপার্টি ব্যবহার করে, আপনি এনিমেশনের সময়কাল, ব্যবহার, বিলম্ব, পুনরাবৃত্তির সংখ্যা এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারেন।
box-animation-ease-in-outক্লাসanimation-nameহিসাবেslideনির্ধারণ করে এবং@keyframes-এ সংজ্ঞায়িতslideএনিমেশন ব্যবহার করে।3sহলোanimation-duration, অর্থাৎ প্রতিটি এনিমেশন সাইকেল ৩ সেকেন্ডে সম্পন্ন হয়।ease-in-outহলোanimation-timing-function, যা এনিমেশনকে ধীরে শুরু করায়, গতি বাড়ায় এবং শেষে আবার ধীরে শেষ হয়।infiniteহলোanimation-iteration-count, অর্থাৎ এনিমেশন অনির্দিষ্টকাল ধরে পুনরাবৃত্তি করবে।
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}box-animation-alternateক্লাসanimation-nameহিসাবেcolor-changeনির্ধারণ করে এবং@keyframes-এ সংজ্ঞায়িতcolor-changeএনিমেশন ব্যবহার করে।ease-in-out-এর পরে থাকা1sহলোanimation-delay, যা এনিমেশন শুরু হওয়ার আগের বিলম্ব নির্ধারণ করে। এনিমেশন ১ সেকেন্ড পরে শুরু হবে।1sএর পরে থাকা3হলোanimation-iteration-count, অর্থাৎ এনিমেশন ৩ বার পুনরাবৃত্তি হবে।alternateহলোanimation-direction, যা এনিমেশন চালানোর দিক নির্ধারণ করে।alternateনির্ধারণ করে যে এনিমেশন বিকল্পভাবে চলে।
animation প্রপার্টির গঠন।
animation প্রপার্টি একটি সংক্ষিপ্ত প্রপার্টি যা একাধিক উপ-প্রপার্টিকে একত্রিত করে। এখানে প্রধান উপ-প্রপার্টিগুলি দেওয়া হলোঃ।
animation-nameপ্রপার্টি: প্রয়োগ করার জন্য এনিমেশনের নাম নির্ধারণ করে। এটি অবশ্যই@keyframes-এ সংজ্ঞায়িত এনিমেশনের নামের সাথে মিলে যেতে হবে।animation-durationপ্রপার্টি: এনিমেশন একটি সাইকেল সম্পূর্ণ করতে যে সময় লাগে তা নির্ধারণ করে। সময় একক হলো সেকেন্ড (s) অথবা মিলিসেকেন্ড (ms)।animation-timing-functionপ্রপার্টি: এনিমেশনের গতির গতি নির্ধারণ করে।ease,linear,ease-in,ease-out,ease-in-outইত্যাদি মান ব্যবহৃত হয়।easeনির্ধারণ করলে এনিমেশন ধীরে শুরু হয়, গতি বাড়ায় এবং শেষে আবার ধীরে হয়।linearনির্ধারণ করলে এনিমেশন শুরু থেকে শেষ পর্যন্ত একটি নিরবিচ্ছিন্ন গতি বজায় রাখে।- ‘ease-in’ ব্যবহার করলে অ্যানিমেশনটি ধীরে শুরু হয় এবং দ্রুত শেষ হয়।
- ‘ease-out’ ব্যবহার করলে অ্যানিমেশনটি দ্রুত শুরু হয় এবং ধীরে শেষ হয়।
- ‘ease-in-out’ ব্যবহার করলে অ্যানিমেশন ধীরে শুরু হয়, দ্রুত অগ্রসর হয় এবং ধীরে শেষ হয়।
animation-delayপ্রপার্টি অ্যানিমেশন শুরু হওয়ার আগে বিলম্ব নির্দেশ করে। সময় একক হয় সেকেন্ড অথবা মিলিসেকেন্ড।animation-iteration-countপ্রপার্টি নির্দেশ করে অ্যানিমেশনটি কতবার পুনরাবৃত্তি হবে।infiniteউল্লেখ করলে অ্যানিমেশনটি অনির্দিষ্টকালের জন্য পুনরাবৃত্তি হবে।animation-directionপ্রপার্টি অ্যানিমেশনের প্লेब্যাক দিক নির্দেশ করে। বিকল্পগুলোর মধ্যে রয়েছেnormal(সামনের দিকে),reverse(পিছনের দিকে),alternate(বিকল্পভাবে খেলবে), এবংalternate-reverse(বিকল্পভাবে পিছন দিক থেকে শুরু করে খেলবে)।animation-fill-modeপ্রপার্টি অ্যানিমেশন শুরু হওয়ার আগে এবং শেষ হওয়ার পরে তার অবস্থাটি নির্দেশ করে। আপনিnone,forwards,backwards, অথবাbothযেকোনো একটি উল্লেখ করতে পারেন।animation-play-stateপ্রপার্টি নির্দেশ করে অ্যানিমেশনটি চলছে না বিরত রয়েছে। আপনিrunningবাpausedউল্লেখ করতে পারেন।
সারসংক্ষেপ
animation প্রপার্টি একটি শক্তিশালী হাতিয়ার যা ডায়নামিকভাবে এলিমেন্টগুলোর স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। @keyframes ব্যবহার করে আপনি সময়ের সাথে সাথে স্টাইলের পরিবর্তন কিভাবে হবে তা নির্ধারণ করতে পারেন এবং animation-এর প্রতিটি সাব-প্রপার্টির মাধ্যমে বিস্তারিত আচরণ নিয়ন্ত্রণ করতে পারেন।
transition প্রপার্টি
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}transition প্রপার্টি CSS স্টাইল পরিবর্তনের সময় অ্যানিমেশন ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়। এটি পরিবর্তনগুলিকে মসৃণ হতে দেয় যখন hover, focus, active মতো অবস্থা পরিবর্তন হয় বা JavaScript দ্বারা স্টাইল ডায়নামিকভাবে পরিবর্তন হয়।
আসুন transition-box ক্লাসের একটি উদাহরণ দেখি যেখানে একটি বোতামে মাউস নিয়ে যাওয়ার সময় ব্যাকগ্রাউন্ড রঙ মসৃণভাবে পরিবর্তিত হয়।
- transition-box ক্লাসে, transition প্রপার্টি ব্যাকগ্রাউন্ড রঙের পরিবর্তনে ২-সেকেন্ডের একটি ট্রানজিশন প্রয়োগ করে। পরিবর্তনটি ease হিসেবে উল্লেখ করা হয়েছে, যা এটিকে মসৃণ করে তোলে।
- hover ছদ্ম-ক্লাসটি মাউস বোতামের উপরে নিয়ে যাওয়া হলে ব্যাকগ্রাউন্ড রঙ lightgray থেকে steelblue-এ পরিবর্তন করে। এই পরিবর্তনটি transition-box ক্লাসে নির্দিষ্ট করা ২-সেকেন্ডে মসৃণভাবে ঘটে।
একই সঙ্গে একাধিক প্রপার্টিতে transition প্রয়োগ করা সম্ভব।
- transition-2-properties ক্লাসের উদাহরণে, ব্যাকগ্রাউন্ড রঙ ৫ সেকেন্ডে পরিবর্তিত হয় এবং প্রস্থ ০.৫ সেকেন্ডে পরিবর্তিত হয়।
মূল সিনট্যাক্স
1/* Basic syntax of transition */
2transition: property duration timing-function delay;propertyনির্ধারণ করে যে কোন CSS সম্পত্তিতে অ্যানিমেশন প্রযোজ্য হবে।allনির্ধারণ করলে অ্যানিমেশন সব সম্পত্তিতেই প্রযোজ্য হবে।durationঅ্যানিমেশন সম্পূর্ণ হতে যে সময় লাগে তা নির্ধারণ করে। সেকেন্ড (s) অথবা মিলিসেকেন্ড (ms) ব্যবহার করে নির্দিষ্ট করুন।timing-functionঅ্যানিমেশনের গতি পরিবর্তনের ধরন নির্ধারণ করে। আপনিease,linear,ease-in,ease-out,ease-in-outইত্যাদি বিকল্প ব্যবহার করতে পারেন।delayঅ্যানিমেশন শুরু হওয়ার পূর্বে বিলম্বের সময় নির্ধারণ করে। সেকেন্ড অথবা মিলিসেকেন্ডে নির্দিষ্ট করুন।
transition এর বিস্তারিত বৈশিষ্ট্য
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition নিম্নলিখিত হিসাবে পৃথক বৈশিষ্ট্য হিসাবেও ব্যবহার করা যেতে পারে।
transition-property: কোন সম্পত্তিতে অ্যানিমেশন প্রয়োগ হবে তা নির্ধারণ করে।transition-duration: অ্যানিমেশন সম্পূর্ণ হতে যে সময় লাগবে তা নির্ধারণ করে।transition-timing-function: অ্যানিমেশনের গতির অগ্রগতির ধরন নির্ধারণ করে।ease,linear,ease-in,ease-out,ease-in-outইত্যাদি অপশন ব্যবহার করা যায়।transition-delay: অ্যানিমেশন শুরু হওয়ার আগে বিলম্বের সময় নির্ধারণ করে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।