ویژگی Style animationFillMode
- پچھلے صفحہ animationDuration
- نئی صفحہ animationIterationCount
- پچھلے سیکشن کی واپسی ایچ تی ایمل ڈوم اسٹائل آوبجیکٹ
تعریف و استفاده
animationFillMode ویژگی‌ها تعیین می‌کنند که استایل در چه زمانی به عنصر اعمال شود (پس از پایان آنی‌میشن، یا با "تأخیر").
به طور پیش‌فرض، آنی‌میشن‌های CSS قبل از اینکه اولین کلیدی را در حالت "پخش" اجرا کنند، تأثیرگذار بر عنصر در حال آنی‌میشن نیستند و پس از اینکه آخرین کلیدی اجرا شد، تأثیرگذار را متوقف می‌کنند.animationFillMode ویژگی‌ها می‌توانند این رفتار را تغییر دهند.
مثال
برای تغییر ویژگی animationFillMode عنصر <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
نحوه‌ی نوشتن
برای برگشت‌دهی ویژگی animationFillMode:
عنصر.style.animationFillMode
برای تنظیم ویژگی animationFillMode:
عنصر.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| none | مقدار پیش‌فرض. آنی‌میشن قبل از اجرا یا پس از اجرا هیچ استایل خاصی را به عنصر هدف اعمال نمی‌کند. |
| forwards | پس از پایان آنی‌میشن (که توسط animation-iteration-count تعیین می‌شود)، آنی‌میشن به ویژگی‌های این ویژگی در پایان آنی‌میشن اعمال می‌شود. |
| backwards |
در مدت زمان تعیین شده توسط animation-delay، آنی‌میشن به ویژگی‌های تعیین شده در کلیدی‌های آنی‌میشن اعمال می‌شود، که اولین اجرای آنی‌میشن را آغاز می‌کند. این‌ها از مقادیر کلیدی (وقتی که جهت آنی‌میشن "normal" یا "alternate" باشد) یا به مقادیر کلیدی (وقتی که جهت آنی‌میشن "reverse" یا "alternate-reverse" باشد) هستند. |
| both | آنی‌میشن‌ها به قوانین قبل و بعد از حرکت پیروی می‌کنند. یعنی، آن‌ها در دو جهت ویژگی‌های آنی‌میشن را گسترش می‌دهند. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر پدرش ارث می‌برد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | none |
|---|---|
| برگشت‌دهی: | رشته، که نشان‌دهنده ویژگی‌های animation-fill-mode نمائش. |
| CSS نسخه: | CSS3 |
مرورگر پشتیبانی
animationFillMode این یک ویژگی CSS3 (1999) است.
تمام مرورگرها این را کاملاً پشتیبانی می‌کنند:
| کروم | ایج | فایرفاکس | سافاری | آپرا | IE |
|---|---|---|---|---|---|
| کروم | ایج | فایرفاکس | سافاری | آپرا | IE |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | 11 |
مرتبط صفحات
CSS مرجع کتاب:animation-fill-mode نمائش
- پچھلے صفحہ animationDuration
- نئی صفحہ animationIterationCount
- پچھلے سیکشن کی واپسی ایچ تی ایمل ڈوم اسٹائل آوبجیکٹ
