CSS @کیفیمز قوانین
- پچھلے پنجرے justify-self
- پچھلے پنجرے @layer
تعریف و استفاده
با استفاده از قاعده @keyframes، شما میتوانید انیمیشن ایجاد کنید.
اصل ایجاد انیمیشن این است که یک مجموعه از استایلهای CSS به تدریج به مجموعه دیگری تغییر کند.
در طول فرآیند انیمیشن، شما میتوانید این مجموعه از استایلهای CSS را چندین بار تغییر دهید.
با استفاده از درصدها زمان تغییرات را مشخص کنید یا از کلمات کلیدی "از" و "تا" استفاده کنید که معادل 0% و 100% هستند.
0% زمان شروع انیمیشن و 100% زمان پایان انیمیشن است.
تذکر:برای بهرهبرداری از پشتیبانی بهترین مرورگرها، باید همیشه انتخابگرهای 0% و 100% را تعریف کنید.
تذکر:برای کنترل ظاهر انیمیشن از ویژگیهای انیمیشن استفاده کنید و آن را با انتخابگر پیوند دهید.
توجہ دہانی:!important قوانین در فریمهای کلیدی نادیده گرفته میشوند (لطفاً به آخرین مثال این صفحه مراجعه کنید).
لطفاً به: مراجعه کنید
تدریس CSS3:CSS3 اینیمیشن
مثال
مثال 1
div علامت کو یکسر سمت پائین بچھانے کے لئے: }}
@keyframes mymove {
از {top: 0px;}
تو {top: 200px;}
}
مثال 2
آنیما میں کثیر تعداد کی کلیدی فیمس نمائشات شامل کرنا:
@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 سائز نمائشات کا انتخاب:
@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 {
از {top: 0px;}
50% {top: 100px !important;} /* نا قابل نظر */
تو {top: 200px;}
}
CSS گرامر
@keyframes animationname {keyframes-selector {css-styles;}}
ویژگی کا مقدار
| مقدار | وصف |
|---|---|
| animationname | ضروری ہے۔آنیما کا نام طے کرنا. |
| keyframes-selector |
ضروری ہے۔آنیما کی مدت کا فیصد. قابل قبول کی اعداد:
|
| css-styles | ضروری ہے۔ایک یا کثیر عددی CSS سائز نمائشات. |
بrowsر کی سپورٹ
| چروم | 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
