خصوصیت animation-fill-mode
مثال (خصوصیت animation-fill-mode)
حرکت دادن (animate) شی ای از یک مکان به مکانی دیگر و وادار کردن آن شی ء به ماندن در آن مکان:
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-fill-mode را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خصوصیت animation-fill-mode می توان مشخص نمود که خارج از اجرای انیمیشن (قبل یا بعد از اجرا)، چه مقادیری روی عنصر اعمال شود.
بطور پیشفرض، CSSهایی که در حین اجرای انیمیشن استفاده می شوند، قبل و بعد از اجرای انیمیشن روی عنصر حرکت داده شده هیچ اثری ندارند. خصوصیت animation-fill-mode می تواند این رفتار را لغو کند.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.animationFillMode="backwards" |
نحوه استفاده
| مقدار | توضیحات |
|---|---|
| none | بعد یا قبل از اجرای انیمیشن، هیچ Styleی روی عنصر حرکت داده شده اعمال نخواهد شد. |
| forwards | پس از پایان انیمیشن (توسط animation-iteration-count تعیین می شود)، خصوصیت هایی که در آخرین فریم اعمال شده اند، روی عنصر حرکت داده شده نیز اعمال می شود. |
| backwards | در طول زمان انتظار، قبل از اجرای انیمیشن (توسط خصوصیت animation-delay تعیین می شود)، مقادیر خصوصیت هایی که در اولین تکرار انیمیشن استفاده می شوند، در طول این زمان روی عنصر اعمال خواهد شد. این مقادیر یا از فریم "from" هستند (زمانی که animation-direction با مقدار "normal" یا "alternate" تنظیم شده است) یا از فریم "to" (زمانی که animation-direction با مقدار "reverse" یا "alternate-reverse" تنظیم شده است). |
| both |
انیمیشن از قواعد هردوی forwards و backwards پیروی می کند. این به این معناست که خصوصیت های انیمیشن را در هر دو جهت گسترش می دهد. |
بیاموزهای مرتبط
CSS3 Animation (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8701