ویژگی animation-fill-mode در css
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی animation-fill-mode در css توضیحاتی را ارائه نماییم. ویژگی کاربردی animation-fill-mode در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.
معرفی و کاربرد ویژگی animation-fill-mode در css
خاصیت animation-fill-mode می تواند قبل از شروع اجرای انیمیشن یا پس از پایان اجرای انیمیشن درون تگ html مورد نظر ، یک سبک یا استایل ایجاد کند.
در حقیقت به طور پیش فرض CSS هایی که در حین اجرای انیمیشن استفاده می شوند، قبل و بعد از اجرای انیمیشن روی تگ html متحرک هیچ اثری ندارند. اما خصوصیت animation-fill-mode می تواند این رفتار را برای انیمیشن مورد نظر تغییر دهد.
مقادیر صفت جدید animation-fill-mode در زبان طراحی css
صفت جدید animation-fill-mode که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:
- مقدار none
- مقدار forwards
- مقدار backwards
- مقدار both
- مقدار initial
- مقدار inherit
مقدار none درون ویژگی animation-fill-mode در css
اگر خاصیت animation-fill-mode را برابر با یک مقدار none قرار دهیم، در حقیقت هیچ گونه استایل یا سبکی به ابتدا یا انتهای انیمیشن در تگ html متحرک نشان داده نمی شود. و به صورت پیش فرض انیمیشن اجرا خواهد شد.
مقدار forwards درون خاصیت animation-fill-mode در زبان css
اگر خاصیت animation-fill-mode را برابر با یک مقدار forwards قرار دهیم، پس از پایان اجرای انیمیشن که تعداد دفعات تکرار آن توسط خصوصیت animation-iteration-count تعیین می شود، خصوصیت هایی که در آخرین فریم های انیمیشن اعمال شده اند، روی تگ html متحرک شده نیز اعمال می شود.
مقدار backwards درون خاصیت animation-fill-mode در زبان سی اس اس
اگر خاصیت animation-fill-mode را برابر با یک مقدار backwards قرار دهیم، قبل از اجرای انیمیشن که توسط خصوصیت animation-delay که میزان تاخیر انیمیشن را تا شروع اجرا تعیین می کند، مقادیر خصوصیت هایی که در اولین فریم تکرار انیمیشن استفاده می شوند، در طول این زمان روی تگ html متحرک اعمال خواهند شد.
مقدار both درون ویژگی animation-fill-mode در css
اگر خاصیت animation-fill-mode را برابر با یک مقدار both قرار دهیم، در این صورت قواعدی که در مورد هر دو مقدار forwards و backwards در خصوصیت animation-fill-mode برای تگ html متحرک توضیح دادیم، روی انیمیشن تگ مربوطه اعمال می شود.
مقدار initial درون خاصیت animation-fill-mode در زبان سی اس اس
اگر خاصیت animation-fill-mode را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون ویژگی animation-fill-mode در css
اگر خاصیت animation-fill-mode را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیات انیمیشن را از والد پدری خود به ارث می برد.
مثال در مورد خاصیت animation-fill-mode در زبان طراحی سی اس اس
div{animation-fill-mode: backwards;}
بررسی خاصیت animation-fill-mode از نظر نسخه زبان طراحی css
ویژگی کاربردی animation-fill-mode در زبان css به تازگی و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت animation-fill-mode
عناوین ساختاری خاصیت animation-fill-mode | وضعیت ساختاری خاصیت animation-fill-mode |
مقدار پیش فرض | none |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.animationFillMode="forwards |
پشتیبانی مرورگرهای اینترنتی از ویژگی animation-fill-mode در css
خاصیت css | |||||
animation-fill-mode | 43.0 | 10.0 | 16.0 | 4.0 | 15.0 |
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
ویژگی animation-fill-mode در css سبک در انیمیشن – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید