آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 4) : ویژگی animation-fill-mode

ویژگی animation-fill-mode

این ویژگی جالب و حرفه ای مشخص میکنه زمانی که انیمیشن برای المنت مورد نظر اجرا نمیشه، چه استایلی برای اون اعمال بشه. فرض کنید که یک المنت h1 بصورت زیر داریم:

و کدهای CSS زیر رو برای اون تعریف کردیم:

میبینید که رنگ این المنت رو در ابتدا قرمز در نظر گرفتیم و یک keyframes بنام color ساختیم و رنگ رو از آبی تیره به سبز تبدیل کردیم. این انیمیشن بصورت ease و بمدت دو ثانیه اجرا میشه. ما در این مطلب در همه مثالها از 2 ثانیه Delay استفاده میکنیم تا بتونیم قبل از اجرا شدن انیمیشن رو هم بررسی کنیم و بهتر با مقادیر ویژگی animation-fill-mode آشنا بشیم. اگر اون رو در مرورگر ببینید بصورت زیر هست:

همونطور که دیدید در دو ثانیه اول که تاخیر داره، همون قرمز یا مقدار اولیه میمونه و زمانی که انیمیشن شروع میشه، از رنگ آبی به سبز تبدیل میشه و در آخر هم دوباره به مقدار اولیه که همون قرمز هست، برمیگرده. این روند طبیعی اجرا انیمیشن هست. حالا میخایم ما با استفاده از ویژگی animation-fill-mode این روند رو تغییر بدیم. مقدار پیش فرض این ویژگی، none هست و به این معنی هست که زمانی که انیمیشن اجرا نمیشه، همون استایل اولیه به المنت مورد نظر اعمال میشه و یعنی این مقدار همون روند طبیعی انیمیشن هستش. خب حالا سراغ مقادیر دیگر این ویژگی میریم.

در ابتدا مقدار forwards رو بررسی میکنیم. زمانی که ویژگی animation-fill-mode رو برابر با forwards قرار میدید، استایلهایی که در آخرین rule درون keyframes قرار داده شده، بعد از اتمام انیمیشن، برای المنت مورد نظر اعمال میشه. اگر در بالا نگاه کنید، دو تا rule درون keyframes قرار گرفته. 0% و 100%. اگر از forwards استفاده کنیم کدها بصورت زیر میشه:

پس باید زمانی که انیمیشن به پایان میرسه، دیگه رنگ پس زمینه به حالت اولیه و قرمز بر نگرده و سبز رنگ بشه. بصورت زیر:

اینو در نظر داشته باشید که همیشه استایل آخرین rule بعد از انیمیشن اعمال نمیشه. مثلا فرض کنید از ویژگی animation-iteration-count استفاده کنیم. همونطور که میدونین با استفاده از این ویژگی میتونیم تعداد تکرار انیمیشن رو مشخص کنیم. مثلا میتونیم عدد 1.5 رو هم قرار بدیم و بگیم که میخایم 1 بار کامل و یک بار نصفه این انیمیشن اجرا بشه. پس در این حالت اگر از این دو ویژگی همزمان استفاده کنید، کد بصورت زیر میشه:

میبینید که یک rule به keyframes اضافه کردیم و وقتی 1.5 رو برای animation-iteration-count قرار بدیم، این rule آخرین استایلی هست که به المنت اعمال میشه و در نهایت هم بصورت کامل پابرجا میشه. بصورت زیر:

یک حالت دیگه هم که میتونه تاثیر داشته باشه، جهت اجرا شدن انیمیشن هست، اگر با استفاده از ویژگی animation-direction انیمیشن رو reverse کنیم، بجای اینکه Rule آخر اعمال بشه، Rule اول اعمال میشه. کد بصورت زیر میشه:

خروجی در مرورگر هم بصورت زیر میشه:

میبینید که رنگ مورد نظر در آخر آبی میشه. خب این از مقدار forwards.

میریم سراغ مقدار backwards. با قرار دادن این مقدار، استایلی که در اولین Rule هست، قبل از اجرا شدن انیمیشن برای المنت مورد نظر اعمال میشه. معمولا قبل از انیمیشن منظورمون همونجا هست که Delay قرار دادیم. یعنی در جایی که دو ثانیه Delay داریم، ابتدا رنگ آبی میشه و بعد ادامه ماجرا. کد بصورت زیر میشه:

خروجی در مرورگر:

اگر از مقدار both برای این ویژگی استفاده کنیم، مثل اینه که همزمان از forwards و backwards استفاده کردیم. یعنی اولین Rule قبل از اجرای انیمیشن اعمال میشه و آخرین Rule هم بعد از اتمام انیمیشن اعمال میشه. کد بصورت زیر میشه:

خروجی در مرورگر بصورت زیر میشه:

این موارد، مقادیر اصلی این ویژگی بودن. اگر ابزار Animate.css رو ببینید، خواهید دید که این ابزار از مقدار both برای این ویژگی استفاده کرده.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source