قانون keyframes@ در css
قانون keyframes@ در css تعریف چرخه انیمیشن در css
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد دستور keyframes@ در زبان css توضیحاتی را ارائه نماییم.
دستور keyframes@ در سومین نسخه زبان طراحی سی اس اس یعنی CSS3 معرفی شده است.
معرفی قانون کاربردی keyframes@ در زبان طراحی سی اس اس
توسط قانون کاربردی keyframes@ می توانیم یک کد انیمیشن مشخص نماییم.
این انیمیشن یک نوع تغییر شکل تدریجی در مجموعه ای از سبک های css به سبک های css دیگر هست.
در طول یک انیمیشن می توانیم مجموعه ای از استایل های css را چندین مرتبه تکرار نماییم.
مشخص کردن زمان این تغییرات در گروه استایل ها ، از طریق مقدار درصدی و کلمات کلیدی “from” و “to” اتفاق می افتد.
مقدار درصدی 0% به عنوان نقطه شروع انیمیشن و مقدار درصدی 100% به منزله تکمیل انیمیشن است.
نکات مهم
- جهت بهترین پشتیبانی مرورگر ها از دستور keyframes@ از دو سلکتور درصدی 0% و 100% استفاده نمایید.
- از خصوصیات انیمیشن برای کنترل ظاهر انیمیشن استفاده کنید. و همچنین انیمیشن را به انتخابگر ها متصل نمایید.
- هرگز از دستور important! در زمان استفاده از دستور keyframes@ استفاده نکنید.
- پس از دستور keyframes@ بایستی اسم انیمیشن مربوطه را بیاورید.
- در داخل دستور keyframes@ استفاده از مقادیر درصدی ( % ) یا کلمات کلیدی ( فریم های کلیدی ) from و to اجباری است.
- در داخل فریم های کلیدی from و to و یا مقادیر درصدی ( % ) می توانید از گروه استایل های CSS برای ایجاد انیمیشن استفاده نمایید.
مقادیر دستور کاربردی keyframes@ در زبان طراحی سی اس اس
دستور کاربردی keyframes@ که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار animationname
- مقدار keyframes-selector
- مقدار css-styles
قانون keyframes@ در css تعریف چرخه انیمیشن در css
مقدار animationname درون دستور keyframes@ در زبان سی اس اس
اگر دستور keyframes@ را برابر با مقدار animationname قرار دهیم، یعنی می خواهیم یک اسم برای انیمیشن مورد نظر در دستور keyframes@ تعیین نماییم.
مثال براساس مقدار animationname برای دستور keyframes@
[html] @keyframes Myanimation [/html]
مقدار keyframes-selector درون دستور keyframes@ در زبان سی اس اس
اگر دستور keyframes@ را برابر با مقدار keyframes-selector قرار دهیم، یعنی می خواهیم ابتدا و انتهای مراحل یک انیمیشن را از طریق فریم های کلیدی from و to یا مقادیر درصدی ( % ) تعیین نماییم.
مثال براساس مقدار keyframes-selector برای دستور keyframes@
[html] @keyframes Myanimation 0% { } 100% { } [/html]
[html] @keyframes Myanimation from { } to { } [/html]
مقدار css-styles درون دستور keyframes@ در زبان سی اس اس
اگر دستور keyframes@ را برابر با مقدار css-styles قرار دهیم، یعنی می خواهیم در داخل فریم های کلیدی from و to و یا در داخل مقادیر درصدی ( % ) ، گروهی از استایل های CSS را جهت ایجاد انیمیشن در دستور keyframes@ قرار دهیم.
مثال براساس مقدار css-styles برای دستور keyframes@
[html] @keyframes Myanimation 0% { background-color:blue; top:10px; } 100% { font-size:20px; left:400px; } [/html]
[html] @keyframes Myanimation from { background-color:blue; top:10px; } to { font-size:20px; left:400px; } [/html]
بررسی دستور keyframes@ از نظر نسخه زبان طراحی سی اس اس
دستور keyframes@ در سومین نسخه زبان طراحی سی اس اس یعنی CSS3 معرفی شده است.
پشتیبانی مرورگرهای اینترنتی از دستور keyframes@ در زبان طراحی سی اس اس
خاصیت css | ![]() | ![]() | ![]() | ![]() | ![]() |
keyframes@ | 43.0 به بالا و 4.0 تا 43.0 با -webkit- | 10.0 | 16.0 به بالا و 5.0 تا 16.0 با -moz- | 9.0 به بالا و 4.0 تا 9.0 با -webkit- | 30.0 به بالا و 15.0 تا 30.0 با -webkit- و 12.0 تا 15.0 با -o- |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
قانون keyframes@ در css تعریف چرخه انیمیشن در css – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید