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

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

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

به طور کلی در مباحث انیمشن ها ما حدودا 10 تا عنوان داریم 

1- keyfram@

2- animation : می تواند تلفیقی از گزینه های بعدی باشد اولین مقدار animation - name  دومین مقدار  animation-direction و سومین مقدار animation-itreation-count

3- animation-delay : برای تاخیر در انیمشن ها 

4- animation-direction : برای جهت های انیمشن ها 

5- animation-duration : برای مدت زمانی که اون انیمشن بیاد و اون عمل رو انجام بدهد برای مثال مقدار reverse آن میاد و از انتها شروع میکند به حرکت کردن انیمشن امون 

6- animation-fill-mode : برای حفظ آخرین  مقداری که برای کی فریم در نظر گرفتیم استفاده کی شود که مقادیر مختلفی رو میگیرد forWard که آخرین کی فریم رو مقادیرشو حفظ میکند و بر نمیگرد  backward  به مرحله و نسخه اولیه خودش میاد و برمیگردد 

7- animation-itreation-count : تعداد دفعات تکرار انیمشن ها هستش 

8- animation - name : نام انیمشن هستش 

9- animation-play-state : این انیمشن بیاد و پاز بشود یا اینکه پلی بشود و اجرا شود برای درست کردن دکمه ها 

10 - animation - timimg - function : بحث همون افکت های که در جلسه قبلی بررسی شدن

درست گردن یک انیمشن ساده :  در ابتدا با استفاده از  keyfram@ میایم و اون استایل های مربوط به انمیشن امون رو مینویسیم و یک نام براش قرار میدهیم مثل changeColor  حال دو خاصیت from {}  و  to {} رو باید براش قرار دهیم 

که اولی ویژگی هایی که در الان داریم و دومی ویژگی های که قرار تبدیل بشود به اون ها 

حال در داخل  استایل های اصلی مون می توانیم animation - name نام انیمشن که در بالا درست کردیم قرار دهیم و با دیگر پراپرتی ها اون هارو کنترل بکنیم  مثلا با animation-duration مدت زمان انمیشن رو کنترل بکنیم یا با animation-itreation-count تعداد دفعات تکرار آن هارو در نظر بگیریم 

حال این مدل from  و to  که گفته شد برای موقعی هست که ما یک نوع پراپرتی بخایم تغیر بدهیم اگر خواستیم که پراپرتی های زیادی رو تغیر بدهیم میتوانیم طبق مثال زیر بیایم و از درصد ها استفاده بکنیم با مثلا واحد های 25 درصدی 

@keyframes changes { 

0%{ background-color = red }
25%{  background-color = green   }
50%{  background-color = blue  }
75%{   background-color = brown  }
100%{  background-color = black  }

}