آموزش جامع CSS Animation

CSS Animations یکی از قابلیت‌های جذاب CSS هست که به طراحان وب اجازه می‌دهد که بدون نیاز به جاوااسکریپت یا استفاده از تصاویر GIF حجیم، انیمیشن‌های روان، زیبا و بسیار کم حجم بسازند. سی‌اس‌اس انیمیشن به ما امکان می‌دهد ویژگی‌های مختلف عناصر (مثل رنگ، موقعیت، اندازه، شفافیت و …) را در طول زمان تغییر دهیم. این تغییرات می‌توانند تکرار شوند یا بر اساس زمان‌بندی خاص اجرا شوند و یا با افکت‌های شتاب و کاهش سرعت طبیعی‌تر شوند.

این دوره شامل آموزش جامع CSS Animation است که به صورت گام به گام تمام آنچه مرتبط با این شاخه از دانش CSS است را به شما خواهد آموخت. همچنین در این سری آموزشی، مبحث CSS Trasition که در واقع زیر مجموعه‌ای از CSS Animation است نیز مورد بررسی کامل قرار می‌گیرد. شیوه آموزشی این مجموعه بسیار ساده و روان است. با این حال برای فهم بهتر مباحث موجود، بهتر است آشنایی مختصری با CSS داشته باشید. آموزشهای CSS به صورت رایگان در سایت سافت سرا در دسترس هستند. برای دسترسی به این آموزشهای رایگان اینجا کلیک کنید.

مباحث آموزش جامع CSS Animation

01 معرفی CSS Animation
02 سازگاری با مرورگرها
03 تغییر propertyها توسط CSS Transition
04 پارامترهای None و All در property
05 ترکیب property و duration در یک لاین
06 تنظیم حالتهای سازگاری با مرورگرها
07 تعیین تابع حرکت
08 تعیین delay (مکث)
09 انجام پروژه تمرینی CSS Transition
10 تعریف Animation در CSS
11 ساخت انیمیشن با چند کلید فریم
12 تعیین delay در انیمیشن
13 انجام یک پروژه تمرینی
14 تعیین تابع حرکت در CSS Animation و انواع timing-function
15 تکرار انیمیشن
16 چرخش در یک مسیر دایره‌ای شکل
17 توقف و پخش انیمیشن
18 تعیین جهت پیشروی انیمیشن
19 تنظیم وضعیت ابتدایی و انتهایی انیمیشن
20 خلاصه‌نویسی پارامترهای Animation
21 پروژه تمرینی نمایش عناصر لیست با جلوه مورد نظر
22 پروژه تمرینی تایپ متن