این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.
آموزش دستور keyframes در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور keyframes در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
دستور keyframes در CSS
با استفاده از دستور keyframes@ در CSS میتوان رَوال یا نحوه اجرای انیمیشن ها را تعریف کرد، مثلا میتونیم مشخص کنیم یک باکس در مدت زمان ۵ ثانیه از فلان رنگ به فلان رنگ تغییر پیدا کند و…
ما میتوانیم به راحتی از دیگر ویژگی های CSS در این دستور استفاده نماییم و نحوه اجرای انیمیشن را کنترل نماییم، همچنین باید یک نام برای انیمیشن با استفاده از ویژگی animation-name مشخص نماییم و سپس همین نام را به keyframes@ متصل نماییم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .MyBox{ animation-name: free-learn; } @keyframes free-learn{ .... } </style> |
انیمیشن ها برای اجرا شدن نیاز به ۲ نقطه اصلی دارن، یکی نقطه شروع و دیگری نقطه پایان ، که این نقاط با استفاده از کلمات کلیدی زیر مشخص میشوند :
|
1 2 3 4 5 6 7 |
from یا 0% to یا 100% |
یعنی از from یا ۰% شروع شو و به نقطه to یا ۱۰۰% برو، که به راحتی میتوانیم از ویژگی های CSS در این نقاط استفاده نماییم، مثلا بگیم from از رنگ زمینه آبی و to به رنگ زمینه قرمز تغییر رنگ بده و…
Free-Learn
مثال از این دستور
در ادامه میتوانید یک مثال از دستور keyframes@ را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از کلمات کلیدی from و to
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .MyBox{ width:100px; height:100px; background-color: red; animation-name: free-learn; animation-duration: 6s; } @keyframes free-learn{ from {background-color: red;} to {background-color: blue;} } </style> |
مثال شماره ۲ : استفاده از درصد ( ۰% تا ۱۰۰% )
|
1 2 3 4 5 6 7 |
@keyframes free-learn{ 0% {top: 0px; left: 0px;} 25% {top: 0px; left: 300px;} 50% {top: 200px; left: 300px;} 75% {top: 200px; left: 0px;} 100% {top: 0px; left: 0px;} } |
مثال شماره ۳ : تغییر رنگ پس زمینه از رنگ های مختلف در یک مدت زمان مشخص
|
1 2 3 4 5 6 7 |
@keyframes free-learn { 0% { background: #2196F3; } 25% { background: #8AC007; } 50% { background: #9C27B0; } 75% { background: #607D8B; } 100% { background: #2196F3; } } |
مثال شماره ۴ : انیمیشن حرفه ای ( حرکت مورچه ها )
|
1 2 3 |
<style> برای مشاهده دستورات کلیک کنید </style> |
مثال شماره ۵ : انیمیشن حرفه ای ( اسلایدر تصاویر )
|
1 2 3 |
<style> برای مشاهده دستورات کلیک کنید </style> |
Free-Learn
جدول مشخصات دستور keyframes در CSS
در جدول زیر میتوانید مشخصات کلی این دستور را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | – |
|---|---|
| قابل ارث بری | – |
| قابل متحرک سازی | – |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | – |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از دستور keyframes@ در CSS پشتیبانی میکنند یا خیر.
| نام دستور / قانون | Chrome | Firefox | Opera | Safari | Edge |
| keyframes@ | ۴۳ | ۱۶ | ۳۰ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این دستور در CSS بصورت زیر می باشد.
|
1 2 3 4 5 |
@keyframes Animation_Name { Keyframes_Selector { CSS_Styles; } } |
Free-Learn
جدول مقادیر دستور keyframes در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این دستور استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Animation_Name | نام انیمیشن را مشخص میکند ( ضروری ) |
| Keyframes_Selector | استفاده از کلمات کلیدی From و To یا استفاده از ۰% تا ۱۰۰% ( ضروری ) |
| CSS_Styles | دستورات CSS که باید در حین اجرای انیمیشن بروی عناصر اعمال شوند |
Free-Learn
دستور important! در keyframe
- با استفاده از دستور
important!در keyframe میتوان از اجرای یک یا چندین قانون ( همون چیزی که قرار است با استفاده از انیمیشن اجرا شود ) جلوگیری کرد. - مثال : در مثال زیر باکس باید اول رنگش آبی باشه بعدش قرمز بشه و در نهایت زرد بشه ولی با استفاده از دستور important! دیگه باکس قرمز نمیشه. ( یعنی عملا اون بخش نادیده گرفته میشه )
|
1 2 3 4 |
@keyframes free-learn { 0% {background-color:blue;} 50% {background-color:red !important;} 100% {background-color:yellow;} |
Free-Learn
نکات و توضیحات
- توجه داشته باشید که حتما مقدار درصدی وارد کنید مثله ۱۰% و حتما درصدش رو قرار دهید، چون بیشترین سازگاری مرورگرها با درصدها می باشد و سعی کنید از from و to استفاده نکنید.
- دیگه از ۰ تا ۱۰۰ درصد به دلخواه خودتون میتونید نقطه مبدا و مقصد برای اجرای انیمیشن ایجاد نمایید، مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@keyframes free-learn { 0% {..} 5% {..} 8% {..} 14% {..} 18% {..} 24% {..} 30% {..} 36% {..} 42% {..} 47% {..} 53% {..} 64% {..} 75% {..} 86% {..} 94% {..} 100% {..} } |
