آموزش صفر تا صد افکت های انیمیشن CSS

در این دوره آموزشی با افکت های انیمیشنی CSS آشنا شده و یاد می گیرید که چطور از آن ها در پروژه هایتان استفاده کنید.

عنوان اصلی : CSS: Animation

سرفصل ها :

معرفی
خوش آمدی
آنچه قبل از تماشای این دوره باید بدانید
پیشوندهای فروشنده و پشتیبانی مرورگر
با استفاده از فایل های تمرین
1. مروری بر CSS Transitions and Transforms
مبانی تبدیل CSS
تبدیل های سه بعدی ساده
انتقال CSS
چالش: اضافه کردن یک انتقال
راه حل: اضافه کردن یک انتقال
2. درک انیمیشن های CSS
مبانی انیمیشن
از animation-delay و animation-fill-mode استفاده کنید
از انیمیشن-direction استفاده کنید
توابع زمان بندی و سهولت
چالش: افزودن فریم های کلیدی به انیمیشن ما
راه حل: افزودن فریم های کلیدی به انیمیشن ما
3. بلوک های ساختمان انیمیشن CSS
انیمیشن بی نهایت حلقه
یک عنصر را در جای خود متحرک کنید
مکث کنید و با انیمیشن-play-state بازی کنید
تبدیل های سه بعدی را متحرک کنید
تصویری را برای استفاده به عنوان اسپرایت آماده کنید
تصاویر اسپرایت را با مراحل متحرک کنید
چندین انیمیشن زنجیره ای
چالش: اضافه کردن یک انیمیشن سوم به زنجیره
راه حل: اضافه کردن یک انیمیشن سوم به زنجیره
4. استفاده از انیمیشن های CSS در SVG
یک SVG برای انیمیشن آماده کنید
SVG را از Illustrator صادر کنید
SVG را با CSS متحرک کنید
5. عملکرد، پشتیبانی از مرورگر، و بازگشت
زمان استفاده از انیمیشن های CSS
انیمیشن های با کارایی بالا
سازماندهی کد و بک گراند
6. ابزارهایی برای ایجاد انیمیشن های CSS
ابزارهای آنلاین مفید برای انیمیشن ها
استفاده از ابزارهای بازرسی انیمیشن مرورگرها
نتیجه
مراحل بعدی