این آموزش در تاریخ ۱۴۰۰/۱۰/۲۶ آپدیت شده است.
آموزش ویژگی animation در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی animation در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی animation در CSS
با استفاده از ویژگی animation در CSS میتوان تمامی ویژگی های مربوط به انیمیشن ها را بصورت خلاصه نوشت، یعنی در واقع از این ویژگی برای خلاصه نویسی ویژگی های زیر استفاده میشه :
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی animation را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از تمامی مقادیر به جز Play-State ( آموزش ویژگی Play-State )
|
1 2 3 |
.MyBox{ animation: free-learn 2s cubic-bezier(0.4, 1, 1, 0.1) 1s 3 alternate forwards; } |
Free-Learn
جدول مشخصات ویژگی animation در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none 0 ease 0 1 normal none running |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.animation=”free-learn 5s infinite”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی animation در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| animation | ۴۳ | ۱۶ | ۳۰ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
animation: name duration timing-function delay iteration-count direction fill-mode play-state; |
Free-Learn
جدول مقادیر ویژگی animation در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| animation-name | یک نام که باید به keyframe وصل شود |
| animation-duration | مدت زمان اجرای انیمیشن |
| animation-timing-function | یک تابع زمانی برای نحوه اجرای انیمیشن |
| animation-delay | مدت زمانی که باید طول بکشد تا انیمیشن شروع شود |
| animation-iteration-count | تعداد دفعات اجرای انیمیشن |
| animation-direction | جهت اجرای انیمیشن |
| animation-fill-mode | حفظ استایل یک عنصر قبل یا بعد از اجرای انیمیشن |
| animation-play-state | مشخص میکند که انیمیشن اجرا شود یا خیر مثلا مکث (Pause) شود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- همیشه و حتما مقدار ویژگی animation-duration را وارد کنید در غیراینصورت انیمیشن اجرا نخواهد شد.
