فصل انیمشن ها خلاصه ی جلسه سوم - transition در css

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

transition : از این پراپرتی برای  تغیر حالت یک عنصر با یک افکت خاص که دارای 5 پراپرتی هستش در کار با این ها چیز هایی که برای ما مهم است یکی پراپرتی هست که میخاهد این عمل روش صورت گیرد که معمولا روی پراپرتی های مشابه میان و اعمال می شوند  و اون مدت زمانی که باید این عمل روشون صورت بگیرد

چرا استفاده میکنیم ؟ یک موقع هست ما یکسری پرارتی هم در حالت عادی همم در حالت مثلا hover به یک عنصر اومدیم و دادیم و برای مثال میخاهیم وقتی با موس روش رفتیم بیاد و تغیر رنگ بدهد خوب درست کردن این طبق اموزاشای قبلی کاری نداره اما اگر بخاهیم این عمل بیاد و به نرمی اعمال بشود مثلا با یک تاخیر یا درطول چن میلی ثانیه بیاد و این عمل اتفاق بیفتد از این transition ها باید بیایم و استفاده بکنیم 

1- transition : برای خلاصه نویسی یکی های بعدی هستش که مقدار اولی که میگیرد transition-property و مقدار دوم transition-duration و مقدار سوم می شود transition-timing-function و مقدار چهارم میشود      transition-delay

2-transition -property : برای موقعی که میخاهیم تغیر ایجاد شود کدوم پراپرتی مون این عمل transition روش اعمال شودکه طبق مثال بالا مثلا ما میخاهیم رنگ تغیر کند که نام رنگ رو بهش میدهیم  حال نام اون پراپرتی که میخاد تغیر کند رو در آن قرار میدهیم یا هم all میگزاریم که یعنی همه پراپرتی ها تغیر کنند یا هم اگر خواستیم از چن پراپرتی استفاده بکنیم با ,  میایم و اون پراپرتی هارو جدا میکنیم

3-transition-duration : برای کنترل مدت زمان تغیرمون هستشن که برحسب میلی ثانیه به اون مقدار میدهیم بازه زمانی اجرای عمل مورد نظر ما 

4- transition - delay : میزان تاخیر برای اعمال شدن اون تغیراتی که میخاهیم روشون اعمال کنیم که میزان تغیر براش شروع و پایان رو بررسی میکند 

5- transition - timing - function : مربوط به افکت ها که این عمل هایی تغیر پراپرتی که داخل اشون میزاریم رو با یک افکت بیاد و اعمالشون بکند که مقادیر متفاوتی رو میگیرد  

با استفاده از ویژگی transition - timing - function  در CSS میتوان یک منحنی زمانی را با استفاده از یکسری کلمات کلیدی یا تابع ( Cubic Bezier ) جهت کنترل عمل انتقال ( Transition ) مشخص و یا تعریف کرد.

مثلا میتونیم مشخص کنیم که عمل انتقال موقع شروع شدن آروم آروم شروع بشه و بعدش تند بشه و بعدش دوباره آروم آروم به پایان برسه.

1- linear : با یه سرعت یکسان شروع و تا پایان ادامه دارد

2-  ease : پیش فرض – آروم شروع میشه بعد تند و در آخر آروم میشه

3- ease - in : در شروع آروم میشود

4- ease-out : در پایان آروم میشود

5- ease-in-out : در شروع و پایان آروم میشود

6-(step (int,start_or_end : پارامتر اول تعداد تکه تکه شدن ( باید عدد مثبت بزرگتر از ۰ باشد )
و پارامتر دوم اینکه از قسمت شروع باشه یا پایان

7- (cubic-bezie (n,n,n,n : استفاده از مکعب بزیر | یک عدد از ۰ تا ۱