این آموزش در تاریخ ۱۴۰۱/۰۳/۱۲ آپدیت شده است.
آموزش ویژگی animation-play-state در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی animation-play-state در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی animation-play-state در CSS
با استفاده از ویژگی animation-play-state در CSS میتوان مشخص کرد که آیا انیمیشن اجرا شود یا مثلا در حالت مکث ( Pause ) باشد و اجرا نشود.
با استفاده از این ویژگی در جاوااسکریپت به راحتی میتوان ۲ دکمه ایجاد کرد که با استفاده از آن دکمه ها پخش و استپ شدن انیمیشن را کنترل کرد. ( نمونه در مثال شماره ۱ کمی پایین تر )
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی animation-play-state را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از جاوااسکریپت برای اجرا کردن و استپ کردن انیمیشن
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> #MyBox{ width:100px; height:100px; position: relative; background-color: red; animation: free-learn 2s infinite; animation-play-state: paused; } </style> |
مثال شماره ۲ : با رفتن ماوس بروی باکس انیمیشن استپ
|
1 2 3 |
#MyBox:hover{ animation-play-state: paused; } |
Free-Learn
جدول مشخصات ویژگی animation-play-state در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | running |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.animationPlayState=”paused”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی animation-play-state در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| animation-play-state | ۴۳ | ۱۶ | ۳۰ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
animation-play-state: paused|running|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی animation-play-state در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| paused | انیمیشن اِستُپ می شود یا مکث می شود |
| running | پیش فرض – انیمیشن اجرا می شود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
