آموزش انیمیشن دو بعدی با انیمیشن های CSS - دوره و پروژه کامل [ویدئو]

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

معرفی Introduction

• معرفی Introduction

تبدیل عناصر وب سایت خود با استفاده از CSS Transforming your website's elements using CSS

• مقدمه تحولات Transformations introduction

• ترجمه عناصر با استفاده از CSS3 Translating elements using CSS3

• ترجمه عناصر با استفاده از CSS3 - part2 Translating elements using CSS3 - part2

• ترجمه عناصر با استفاده از CSS3 - قسمت 3 Translating elements using CSS3 - part 3

• چرخش عناصر با استفاده از CSS3 Rotating elements using CSS3

• چرخش عناصر با استفاده از CSS3 - قسمت 2 Rotating elements using CSS3 - part 2

• مقیاس بندی عناصر با استفاده از CSS3 Scaling elements using CSS3

• انحراف عناصر با استفاده از CSS3 Skewing elements using CSS3

• ویژگی ماتریس Matrix property

• افزودن افکت های تبدیل چندگانه به یک عنصر واحد Adding multiple transformations effects to a single element

انیمیشن های انتقال در CSS3 Transition Animations in CSS3

• معرفی انیمیشن های انتقالی Transition animations introduction

• ایجاد انتقال های اساسی Creating basic transitions

• بیش از یک ویژگی یا سبک را در طول یک انتقال تغییر دهید Change more than one property or style during a transition

• استفاده از تبدیل با انتقال Using transformations with transitions

• به تعویق انداختن یک انتقال Delaying a transition

• منحنی های سرعت را برای انتقال خود اعمال کنید Apply speed curves to your transition

• کوتاه نویسی انتقال Transition shorthand

انیمیشن های کی فریم در پروژه کوچک CSS3 + 1 Keyframe animations in CSS3 + 1 mini project

• معرفی انیمیشن های کی فریم Keyframe animations introduction

• ایجاد یک فریم کلیدی Creating a keyframe

• فریم های کلیدی با درصد - چند حالت میانی Keyframes with percentages - multiple intermediate states

• چندین تغییر انیمیشن/سبک با یک فریم کلیدی Multiple animation/style changes with one keyframe

• به تاخیر انداختن انیمیشن فریم کلیدی Delaying the keyframe animation

• تعیین تعداد دفعاتی که انیمیشن باید تکرار شود Specifying the number of times the animation should repeat

• منحنی سرعت انیمیشن فریم کلیدی Speed curve of the keyframe animation

• منحنی سرعت - تابع Bezier مکعبی Speed curve - Cubic Bezier function

• پروژه کوچک - انیمیشن توپ متحرک - قسمت 1 Mini project - Moving ball animation - part 1

• پروژه کوچک - انیمیشن توپ متحرک - قسمت 2 Mini project - Moving ball animation - part 2

• کارگردانی انیمیشن Direction of the animation

• مکث یا اجرای انیمیشن Pausing or running the animation

• ویژگی حالت پر کردن انیمیشن Animation fill mode property

• ویژگی کوتاه نویسی انیمیشن Animation shorthand property

• اعمال چندین انیمیشن/فریم کلیدی روی یک عنصر Applying multiple animations/keyframes on one element

پروژه ها - انیمیشن تانک ماهی، چرخاندن کارت و موارد دیگر Projects - Fish Tank Animation, Card flipping & more

• بلوک های سازنده HTML5 انیمیشن مخزن ماهی HTML5 building blocks of the fish tank animation

• طراحی صفحه وب انیمیشن مخزن ماهی را به پایان برسانید Finish designing the fish tank animation web page

• ماهی ها را با استفاده از فریم های کلیدی متحرک کنید Animate the fishes using keyframes

• با استفاده از فریم های کلیدی حباب ها را متحرک کنید Animate the bubbles using keyframes

• پروژه شماره 2 - پروژه برگرداندن کارت Project #2 - Card Flipping Project