این آموزش در تاریخ ۱۳۹۹/۰۱/۲۱ آپدیت شده است.
آموزش ویژگی animation-delay در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی animation-delay در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی animation-delay در CSS
با استفاده از ویژگی animation-delay در CSS میتوانیم مدت زمانی را مشخص نماییم که کاربر باید منتظر بماند و سپس انیمیشن اجرا شود. ( یعنی زمان قبل از اجرا )
که این مدت زمان باید توسط واحد تایم ( Time ) به ۲ صورت زیر مشخص شود :
- s : ثانیه
- ms : میلی ثانیه
هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی animation-delay را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : مدت زمان به ثانیه
|
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: blue; position: relative; animation: free-learn 5s infinite; animation-delay: 2s; } |
مثال شماره ۲ : مدت زمان به میلی ثانیه
|
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: blue; position: relative; animation: free-learn 5s infinite; animation-delay: 2000ms; } |
مثال شماره ۳ : استفاده از مقدار منفی
|
1 2 3 4 5 6 7 8 |
div{ width: 100px; height: 100px; background: blue; position: relative; animation: free-learn 5s infinite; animation-delay: -2s; } |
Free-Learn
جدول مشخصات ویژگی animation-delay در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۰s |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.animationDelay=”1s”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی animation-delay در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- و -o- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| animation-delay | ۴۳٫۰ ۴٫۰ -webkit- |
۱۶٫۰ ۵٫۰ -moz- |
۳۰٫۰ ۱۵٫۰ -webkit- ۱۲٫۰ -o- |
۹٫۰ ۴٫۰ -webkit- |
۱۰٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
animation-delay: time|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی animation-delay در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| time | اختیاری – مدت زمانی که کاربر باید منتظر بماند تا انیمیشن اجرا شود را مشخص میکند. s یعنی ثانیه و ms میلی ثانیه |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
از مقادیر منفی نیز میتوان در این ویژگی استفاده کرد و مشکلی ندارد، یعنی انیمیشن قبل از اینکه صفحه اجرا شود و کاربر بخواهد آنرا مشاهده کند اجرا شده است.
مقدار پیش فرض این ویژگی ۰ می باشد، این یعنی هیچ مدت زمانی طول نکشد تا که انیمیشن بخواد اجرا بشه، در نتیجه اگه شما از این ویژگی استفاده نکرده باشید انیمیشن درجا اجرا خواهد شد.
