সিএসএস(৩) @keyframes Rule প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| @keyframes | ৪৩.০ ৪.০ -webkit- |
১০.০ | ১৬.০ ৫.০ -moz- |
৯.০ ৪.০ -webkit- |
৩০.০ ১৫.০ -webkit- ১২.০ -o- |
সংজ্ঞা ও ব্যবহার
@keyframes বলতে এনিমেশন কোডকে বুঝায়।
এনিমেশন ধীরে ধীরে অন্য সিএসএস স্টাইলের এক সেট থেকে পরিবর্তন করে নির্মিত হয়।
এনিমেশনের সময় আপনি সিএসএস স্টাইল সেট অনেক সময় পরিবর্তন করতে পারেন।
যখন স্টাইল শতাংশে পরিবর্তন ঘটবে , অথবা "from" এবং "to" কিওয়ার্ড ব্যবহৃত হয়ঃ যা ০% এবং ১০০% সমান। ০% এনিমেশন সূচনা হয়, ১০০% যখন এনিমেশন সম্পূর্ণ হয়।
পরামর্শঃ
- সেরা ব্রাউজার সমর্থনের জন্য সবসময় উভয় ০% এবং ১০০% সিলেক্টর দ্বারা সংজ্ঞায়িত করা হয় ।
- এনিমেশন প্রোপার্টি ব্যবহার এনিমেশন চেহারা নিয়ন্ত্রণ করতে এবং সিলেক্টরের সঙ্গে এনিমেশন বাঁধাই করতে ব্যবহার করা হয়।
সিএসএস সিনট্যাক্স
@keyframes animationname {keyframes-selector {css-styles;}}
একটি এলিমেন্টকে ধীরে ধীরে 200px নিচে কিভাবে নামানো যায় তৈরি করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
position :relative;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স*/
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>
<p><b> বিশেষ দ্রষ্টব্য:</b>@keyframes রুল ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
আরও উদাহরণ
একটি এনিমেটে অনেকগুলো keyframe সিলেক্টরকে যোগ করি
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স*/
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>
<p><b> বিশেষ দ্রষ্টব্য:</b>@keyframes রুল ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে সাপোর্ট করে না।</p>
<div></div>
</body>
</html>
ফলাফল
একটি এনিমেশনের মাধ্যমে সিএসএস এর স্টাইল পরিবর্তন :
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
div {
width: 100px;
height: 100px;
background: teal;
position: relative;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
@-webkit-keyframes mymove {
0% {top: 0px; background: teal; width: 100px;}
100% {top: 200px; background: green; width: 300px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স*/
@keyframes mymove {
0% {top: 0px; background: teal; width: 100px;}
100% {top: 200px; background: green; width: 300px;}
}
</style>
</head>
<body>
<p><b> বিশেষ দ্রষ্টব্য:</b>@keyframes রুল ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে সাপোর্ট করে না।</p>
<div></div>
</body>
</html>
ফলাফল
সিএসএস স্টাইলে অনেক কী-ফ্রেম সিলেক্টর থাকেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
div {
width: 100px;
height: 100px;
background: teal;
position: relative;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
@-webkit-keyframes mymove {
0% {top: 0px; left: 0px; background: teal;}
25% {top: 0px; left: 100px; background: green;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: blue;}
100% {top: 0px; left: 0px; background: red;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স*/
@keyframes mymove {
0% {top: 0px; left: 0px; background: teal;}
25% {top: 0px; left: 100px; background: green;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: blue;}
100% {top: 0px; left: 0px; background: red;}
}
</style>
</head>
<body>
<p><b> বিশেষ দ্রষ্টব্য:</b>@keyframes রুল ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্বের ভার্সনগুলোতে সাপোর্ট করে না।</p>
<div></div>
</body>
</html>
ফলাফল
@keyframes প্রোপার্টির ভ্যালু-সমূহ
- animationname - এনিমেশনের একটা নামকে নির্ধারন করে।
- keyframes-selector - এনিমেশন সময়কালের শতকরা প্রয়োজন
Legal values:
0-100%, from (same as 0%), to (same as 100%)
নোটঃ একটা এনিমেশনে অনেকগুলো keyframes-selectors থাকতে পারে।
- css-styles - এক অথবা একের অধিক বৈধ সিএসএস স্টাইল প্রোপার্টি প্রয়োজনে।