CSS @keyframes নিয়ম
- পূর্ববর্তী পৃষ্ঠা justify-self
- পরবর্তী পৃষ্ঠা @layer
সংজ্ঞা ও ব্যবহার
@keyframes রুল দ্বারা, আপনি এনিমেশন তৈরি করতে পারেন。
এনিমেশন তৈরির নীতি হল, একটি সিএসএস সাইলেসটকে ক্রমাগতভাবে আরেকটি সাইলেসটে পরিবর্তন করা。
এনিমেশন প্রক্রিয়ায়, আপনি এই সিএসএস সাইলেসটের সময়কালীন বার পরিবর্তন করতে পারেন。
পরিবর্তন হওয়ার সময়কে শতকরা হিসাবে নির্দিষ্ট করুন বা 'from' এবং 'to' শব্দকোষ ব্যবহার করে, যা ০% এবং ১০০% এর সমতুল্য。
০% এটি এনিমেশনের ভাবৎ সময়কা, ১০০% এটি এনিমেশনের শেষ সময়কা。
টীকা：শুধুমাত্র শ্রেষ্ঠ ব্রাউজার সমর্থন পাওয়ার জন্য আপনাকে ০% এবং ১০০% সিলেক্টরকে সংজ্ঞায়িত করতে হবে。
টীকা：ক্রিয়াকলাপের দেখানোর জন্য এনিমেশন অ্যাট্রিবিউটস ব্যবহার করুন এবং এটিকে সিলেক্টরের সাথে বাঁধুন。
মন্তব্য:!important রুলটি ক্রিয়াকলাপের মূল ফ্রেমে অসক্রিয় হয় (এই পৃষ্ঠার শেষ উদাহরণ দেখুন)。
অন্যথাকে দেখুন：
CSS3 টিউটোরিয়াল：CSS3 অ্যানিমেশন
উদাহরণ
উদাহরণ ১
div এলিমেন্টকে একসঙ্গে নিচে সরানোর জন্য:
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
উদাহরণ 2
একটি এনিমেশনের মধ্যে একাধিক keyframe প্রতিযোগীতা সাংকেতিক যোগ করুন:
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
উদাহরণ 3
একটি এনিমেশনের মধ্যে একাধিক CSS শৈলী পরিবর্তন:
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
উদাহরণ 4
একাধিক CSS শৈলীর একাধিক keyframe প্রতিযোগীতা সাংকেতিক:
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
উদাহরণ 5
মন্তব্য:!important নিয়মটি কীফ্রেমে অবমূল্যাকৃত হয়:
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* বন্ধ করা হয়েছে */
to {top: 200px;}
}
CSS ব্যবহারকৌশল
@keyframes animationname {keyframes-selector {css-styles;}}
প্রতিযোগীতা মান
| মান | বর্ণনা |
|---|---|
| animationname | প্রয়োজনীয়।এনিমেশনের নাম নির্ধারণ করুন。 |
| keyframes-selector |
প্রয়োজনীয়।এনিমেশন সময়ের প্রতিশত。 বৈধ মান:
|
| css-styles | প্রয়োজনীয়।একটি বা একাধিক বৈধ CSS শৈলী প্রতিযোগীতা。 |
ব্রাউজার সমর্থন
| চ্রোম | IE / এজ | ফায়ারফক্স | স্যাফারি | ওপেরা |
|---|---|---|---|---|
| 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
- পূর্ববর্তী পৃষ্ঠা justify-self
- পরবর্তী পৃষ্ঠা @layer
