افکت های انیمیشنی CSS

در این دوره آموزشی ساخت افکت های CSS ای مختلف را یاد می گیرید. برخی از این انیمیشن های عبارتند از : انیمیشن روی دکمه ها ، انیمیشن های سه بعدی ، انیمیشن سازی با گرافیک ها و لوگوها ، بارگذاری صفحات و  . . .

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

سرفصل ها :

معرفی :
مزایای انیمیشن CSS
1. مروری بر انتقال و تبدیل CSS:
مبانی تبدیل CSS
تبدیل های سه بعدی ساده
انتقال CSS
چالش: اضافه کردن یک انتقال
راه حل: اضافه کردن یک انتقال
2. درک انیمیشن های CSS:
اصول انیمیشن CSS فریم کلیدی
انیمیشن-تاخیر و انیمیشن-پر-حالت
نگاهی دقیق تر به حالت پر کردن انیمیشن
انیمیشن- جهت
توابع زمان بندی و سهولت
تابع زمان بندی Steps().
چالش: افزودن فریم های کلیدی به یک انیمیشن
راه حل: افزودن فریم های کلیدی به یک انیمیشن
3. بلوک های ساخت انیمیشن CSS:
انیمیشن های بی نهایت حلقه
مکث کنید و با انیمیشن-play-state بازی کنید
متحرک سازی تبدیل های سه بعدی
زنجیره‌ای کردن چندین انیمیشن فریم کلیدی
چالش: اضافه کردن یک انیمیشن سوم به زنجیره
راه حل: اضافه کردن یک انیمیشن سوم به زنجیره
4. متحرک سازی SVG با CSS:
آماده سازی SVG برای انیمیشن
تنظیمات صادرات و بهینه سازی SVG
متحرک سازی SVG با CSS
5. تکنیک های پیشرفته انیمیشن CSS:
ایجاد یک مسیر حرکت برای CSS با Offset-path
متحرک سازی مسیر حرکت CSS با مسیر افست
انیمیشن پویا CSS با متغیرهای CSS
متحرک سازی فونت های متغیر با CSS
6. ابزارهای ایجاد انیمیشن های CSS:
با استفاده از ابزارهای بازرسی انیمیشن مرورگر
نتیجه :
ابزارهای آنلاین مفید برای CSS