دوره آموزشی CSS: انیمیشن
1 ساعت 51 دقیقهمتوسط2022-11-09
مدرسین
Val Head
Web Designer, Consultant
جزئیات دوره
در سال های اخیر، انیمیشن وب به یک گزینه قدرتمند برای افزایش تجربه کاربر در وب تبدیل شده است و انیمیشن CSS به یک مهارت اصلی برای طراحان وب و توسعه دهندگان تبدیل شده است. در این دوره، Val Head شما را در مهارت های متحرک سازی CSS که برای ایجاد حرکت در پروژه های تعاملی خود نیاز دارید، راهنمایی می کند. Val تغییر و تحولات CSS را معرفی می کند-پایه و اساس اکثر انیمیشن های CSS-و نشان می دهد که چگونه انیمیشن های ساده را تنظیم کرده و زمان بندی، حالت پر شدن و جهت آنها را تنظیم کنیم. او همچنین انیمیشن های حلقه ای و زنجیره ای، متحرک سازی عناصر HTML و SVG، بهینه سازی عملکرد انیمیشن، بهترین استفاده برای انیمیشن های CSS در حال حاضر و سطح پشتیبانی و عملکرد فعلی و چگونگی تغییر آن در آینده را پوشش می دهد. Val این درس ها را به عنوان یک سری کوتاه از انیمیشن های اصلی - کارهای رایجی که ممکن است بخواهید با انیمیشن ها انجام دهید - ارائه می دهد - سپس این تکنیک ها را در یک پروژه کوچک از یک اینفوگرافیک متحرک قرار می دهد تا بتوانید همه آنها را در عمل مشاهده کنید.
مهارت ها
Interactive Web ContentCSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - مزایای انیمیشن CSS
- 02 - استفاده از GitHub Codespaces با این دوره
1. مروری بر CSS Transitions and Transforms
- 03 - مبانی تبدیل CSS
- 04 - تبدیل های سه بعدی ساده
- 05 - انتقال CSS
- 06 - چالش - اضافه کردن یک انتقال
- 07 - راه حل - اضافه کردن یک انتقال
2. درک انیمیشن های CSS
- 08 - اصول انیمیشن CSS فریم کلیدی
- 09 - انیمیشن-تاخیر و انیمیشن-پر-حالت
- 10 - نگاهی دقیق تر به حالت پر کردن انیمیشن
- 11 - انیمیشن- جهت
- 12 - کارکردهای زمان بندی و سهولت
- 13 - تابع زمان بندی () Steps
- 14 - چالش - افزودن فریم های کلیدی به یک انیمیشن
- 15 - راه حل - افزودن فریم های کلیدی به یک انیمیشن
3. بلوک های ساخت انیمیشن CSS
- 16 - انیمیشن های بی نهایت حلقه
- 17 - مکث کنید و با انیمیشن-play-state بازی کنید
- 18 - متحرک سازی تبدیل های سه بعدی
- 19 - زنجیر کردن چندین انیمیشن فریم کلیدی
- 20 - چالش - اضافه کردن انیمیشن سوم به زنجیره
- 21 - راه حل - اضافه کردن انیمیشن سوم به زنجیره
4. متحرک سازی SVG با CSS
- 22 - تهیه SVG برای انیمیشن
- 23 - تنظیمات صادرات و بهینه سازی SVG
- 24 - متحرک سازی SVG با CSS
5. تکنیک های پیشرفته انیمیشن CSS
- 25 - ایجاد مسیر حرکت برای CSS با offset-path
- 26 - متحرک سازی مسیر حرکت CSS با offset-path
- 27 - انیمیشن CSS پویا با متغیرهای CSS
- 28 - متحرک سازی فونت های متغیر با CSS
6. ابزارهایی برای ایجاد انیمیشن های CSS
- 29 - استفاده از ابزارهای بازرسی انیمیشن مرورگر
نتیجه
- 30 - ابزارهای آنلاین مفید برای CSS
دوره های مرتبط
- دوره آموزشی ساخت انیمیشنها و گرافیکهای تعاملی با Rive
- دوره آموزشی برنامه نویسی فرمهای وب با جاوااسکریپت
- دوره آموزشی یادگیری جامع ادوب انیمیت
- دوره آموزشی ورد: فرم های عمیق (مایکروسافت 365)
- دوره آموزشی CSS: تقویت رابطهای کاربری با انیمیشن
- دوره آموزشی ویژگی های جدید Adobe Animate CC
- دوره آموزشی پیمایش اسکرولی: ایجاد یک تجربه وب یک صفحهای
- دوره آموزشی طراحی اینفوگرافیک های تعاملی با Adobe Animate