قانون keyframes@ در css تعریف چرخه انیمیشن 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-