آموزش CSS: Animation (2016)

سرفصل ها و درس ها

معرفی Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• پیشوندهای فروشنده و پشتیبانی مرورگر Vendor prefixes and browser support

• استفاده از فایل های تمرینی Using the exercise files

1. بررسی اجمالی از انتقال CSS و تبدیل 1. Overview of CSS Transitions and Transforms

• مبانی تبدیل CSS CSS transform basics

• تبدیل سه بعدی ساده Simple 3D transforms

• انتقال CSS CSS transitions

• چالش: افزودن گذار Challenge: Adding a transition

• راه حل: افزودن گذار Solution: Adding a transition

• فصل مسابقه Chapter Quiz

2. درک CSS Animations 2. Understanding CSS Animations

• اصول اولیه انیمیشن Animation basics

• از حالت تأخیر انیمیشن و حالت پر کردن انیمیشن استفاده کنید Use animation-delay and animation-fill-mode

• از انیمیشن جهت استفاده کنید Use animation-direction

• عملکردهای زمان بندی و تسهیل Timing functions and easing

• چالش: افزودن فریم های کلیدی به انیمیشن ما Challenge: Adding keyframes to our animation

• راه حل: اضافه کردن فریم های کلیدی به انیمیشن ما Solution: Adding keyframes to our animation

• فصل مسابقه Chapter Quiz

3. بلوک های ساختمان متحرک CSS 3. CSS Animation Building Blocks

• انیمیشن بی نهایت حلقه Infinitely looping animation

• یک عنصر را در جای خود متحرک کنید Animate an element into place

• مکث کنید و با حالت متحرک بازی کنید Pause and play with animation-play-state

• متحرک سازی سه بعدی Animate 3D transforms

• یک تصویر آماده کنید تا از آن به عنوان اسپریت استفاده کنید Prepare an image to use as a sprite

• متحرک کردن تصاویر Sprite با مراحل Animate sprite images with steps

• انیمیشن های متعدد زنجیره ای Chain multiple animations

• چالش: افزودن انیمیشن سوم به زنجیره Challenge: Adding a third animation to the chain

• راه حل: افزودن انیمیشن سوم به زنجیره Solution: Adding a third animation to the chain

• فصل مسابقه Chapter Quiz

4. کاربرد CSS Animations در SVG 4. Applying CSS Animations to SVG

• SVG را برای انیمیشن آماده کنید Prepare an SVG for animation

• SVG را از Illustrator صادر کنید Export SVG from Illustrator

• SVG را با CSS متحرک کنید Animate SVG with CSS

• فصل مسابقه Chapter Quiz

5. عملکرد ، پشتیبانی از مرورگر ، و Fallbacks 5. Performance, Browser Support, and Fallbacks

• هنگامی که از انیمیشن های CSS استفاده کنید When to use CSS animations

• انیمیشن هایی با عملکرد بالا High-performance animations

• سازماندهی کد و موارد پشتیبان Code organization and fallbacks

• فصل مسابقه Chapter Quiz

6. ابزارهای ایجاد CSS Animations 6. Tools for Creating CSS Animations

• ابزارهای آنلاین مفید برای انیمیشن Helpful online tools for animations

• استفاده از ابزارهای بازرسی انیمیشن مرورگرها Using browsers' animation inspection tools

• فصل مسابقه Chapter Quiz

نتیجه Conclusion

• مراحل بعدی Next steps