سبد (0)

خصوصیت animation-fill-mode

مثال (خصوصیت animation-fill-mode)

حرکت دادن (animate) شی ای از یک مکان به مکانی دیگر و وادار کردن آن شی ء به ماندن در آن مکان:

animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari and Chrome */
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای 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"

نحوه استفاده

animation-fill-mode: none|forwards|backwards|both;
مقدارتوضیحات
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)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه