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

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

به طور کلی در مباحث انیمشن‌ها ما حدودا 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  }
}