ویژگی Style animationFillMode
- صفحه قبلی animationDuration
- صفحه بعدی animationIterationCount
- برگشت به طبقه بالاتر موضوع Style در HTML DOM
تعریف و استفاده
animationFillMode ویژگی‌ها مشخص می‌کنند که در چه حالتی استایل به عنصر اعمال می‌شود (پس از پایان آنی‌میشن، یا در حالت تأخیر).
به طور پیش‌فرض، آنی‌میشن‌های CSS قبل از اینکه اولین کلیدفریم را در حالت پخش اولین باری اجرا کنند، تأثیرگذار نیستند و پس از پایان آخرین کلیدفریم تأثیرگذار می‌شوند.animationFillMode ویژگی‌ها می‌توانند این رفتار را تغییر دهند.
مثال
تغییر ویژگی animationFillMode عنصر <div>:
document.getElementById("myDIV").style.animationFillMode = "forwards";
نحوه‌ی نوشتن
بازگشتی ویژگی animationFillMode:
object.style.animationFillMode
تنظیم ویژگی animationFillMode:
object.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) است.
همه مرورگرها این را به طور کامل پشتیبانی می‌کنند:
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| پشتیبانی می‌کند | پشتیبانی می‌کند | پشتیبانی می‌کند | پشتیبانی می‌کند | پشتیبانی می‌کند | 11 |
صفحات مرتبط
دستورالعمل CSS:ویژگی animation-fill-mode
- صفحه قبلی animationDuration
- صفحه بعدی animationIterationCount
- برگشت به طبقه بالاتر موضوع Style در HTML DOM
