دوره آموزشی انیمیشن‌ها، انتقال‌ها و تبدیل‌های خلاق CSS [به‌روزرسانی برای سال 2021] [ویدئو]

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

مبانی انتقال CSS CSS Transitions Basics

• معرفی Introduction

• معرفی Introduction

• CSS Transitions چیست؟ What is CSS Transitions?

• CSS Transitions چیست؟ What is CSS Transitions?

• گزینه های انتقال Transitions Options

• گزینه های انتقال Transitions Options

• روش های مختلف برای نوشتن ویژگی انتقال Different Ways to Write the Transition Property

• روش های مختلف برای نوشتن ویژگی انتقال Different Ways to Write the Transition Property

• چه ویژگی هایی را می توان انتقال داد What Properties can be Transitioned

• چه ویژگی هایی را می توان انتقال داد What Properties can be Transitioned

مبانی انتقال CSS CSS Transitions Basics

CSS 2D تبدیل می شود CSS 2D Transforms

• مبانی تبدیل دو بعدی 2D Transforms Basics

• مبانی تبدیل دو بعدی 2D Transforms Basics

• تابع ترجمه Translate Function

• تابع ترجمه Translate Function

• عملکرد مقیاس Scale Function

• عملکرد مقیاس Scale Function

• تابع چرخش Rotate Function

• تابع چرخش Rotate Function

• عملکرد کج کردن Skew Function

• عملکرد کج کردن Skew Function

• تبدیل مبدا Transform Origin

• تبدیل مبدا Transform Origin

CSS 2D تبدیل می شود CSS 2D Transforms

CSS 3D Transforms CSS 3D Transforms

• ترجمه به صورت سه بعدی Translate in 3D

• ترجمه به صورت سه بعدی Translate in 3D

• چرخش سه بعدی Rotate in 3D

• چرخش سه بعدی Rotate in 3D

CSS 3D Transforms CSS 3D Transforms

CSS نمونه های خلاقانه را تبدیل می کند CSS Transforms Creative Examples

• بررسی اجمالی Overview

• بررسی اجمالی Overview

• اثر شناور دکمه خلاق 1 Creative Button Hover Effect 1

• اثر شناور دکمه خلاق 1 Creative Button Hover Effect 1

• اثر شناور دکمه خلاق 2 Creative Button Hover Effect 2

• اثر شناور دکمه خلاق 2 Creative Button Hover Effect 2

• اثر شناور دکمه خلاقانه 3 Creative Button Hover Effect 3

• اثر شناور دکمه خلاقانه 3 Creative Button Hover Effect 3

• اثر شناور دکمه خلاق 4 Creative Button Hover Effect 4

• اثر شناور دکمه خلاق 4 Creative Button Hover Effect 4

• اثر شناور دکمه خلاق 5 Creative Button Hover Effect 5

• اثر شناور دکمه خلاق 5 Creative Button Hover Effect 5

• اثر شناور دکمه خلاقانه 6 Creative Button Hover Effect 6

• اثر شناور دکمه خلاقانه 6 Creative Button Hover Effect 6

• اثر شناور دکمه خلاق 7 Creative Button Hover Effect 7

• اثر شناور دکمه خلاق 7 Creative Button Hover Effect 7

• اثر شناور دکمه خلاقانه 8 Creative Button Hover Effect 8

• اثر شناور دکمه خلاقانه 8 Creative Button Hover Effect 8

• اثر شناور دکمه خلاقانه 9 Creative Button Hover Effect 9

• اثر شناور دکمه خلاقانه 9 Creative Button Hover Effect 9

• اثر شناور دکمه خلاق 10 Creative Button Hover Effect 10

• اثر شناور دکمه خلاق 10 Creative Button Hover Effect 10

• اثر شناور دکمه خلاق 11 Creative Button Hover Effect 11

• اثر شناور دکمه خلاق 11 Creative Button Hover Effect 11

• اثر شناور دکمه خلاق 12 Creative Button Hover Effect 12

• اثر شناور دکمه خلاق 12 Creative Button Hover Effect 12

• اثر شناور دکمه خلاق 13 Creative Button Hover Effect 13

• اثر شناور دکمه خلاق 13 Creative Button Hover Effect 13

• اثر شناور دکمه خلاقانه 14 Creative Button Hover Effect 14

• اثر شناور دکمه خلاقانه 14 Creative Button Hover Effect 14

• جلوه شناور دکمه خلاق 15 Creative Button Hover Effect 15

• جلوه شناور دکمه خلاق 15 Creative Button Hover Effect 15

• اثر شناور دکمه خلاق 16 Creative Button Hover Effect 16

• اثر شناور دکمه خلاق 16 Creative Button Hover Effect 16

• اثر شناور دکمه خلاق 17 Creative Button Hover Effect 17

• اثر شناور دکمه خلاق 17 Creative Button Hover Effect 17

• اثر شناور دکمه خلاق 18 Creative Button Hover Effect 18

• اثر شناور دکمه خلاق 18 Creative Button Hover Effect 18

• اثر شناور دکمه خلاق 19 Creative Button Hover Effect 19

• اثر شناور دکمه خلاق 19 Creative Button Hover Effect 19

• اثر شناور دکمه خلاقانه 20 Creative Button Hover Effect 20

• اثر شناور دکمه خلاقانه 20 Creative Button Hover Effect 20

• جلوه شناور تصویر با CSS Transforms 1 Image Hover Effect with CSS Transforms 1

• جلوه شناور تصویر با CSS Transforms 1 Image Hover Effect with CSS Transforms 1

• جلوه شناور تصویر با CSS Transforms 2 Image Hover Effect with CSS Transforms 2

• جلوه شناور تصویر با CSS Transforms 2 Image Hover Effect with CSS Transforms 2

• جلوه شناور تصویر با CSS Transforms 3 Image Hover Effect with CSS Transforms 3

• جلوه شناور تصویر با CSS Transforms 3 Image Hover Effect with CSS Transforms 3

• جلوه شناور تصویر با CSS Transforms 4 Image Hover Effect with CSS Transforms 4

• جلوه شناور تصویر با CSS Transforms 4 Image Hover Effect with CSS Transforms 4

• جلوه شناور تصویر با CSS Transforms 5 Image Hover Effect with CSS Transforms 5

• جلوه شناور تصویر با CSS Transforms 5 Image Hover Effect with CSS Transforms 5

• جلوه شناور تصویر با CSS Transforms 6 Image Hover Effect with CSS Transforms 6

• جلوه شناور تصویر با CSS Transforms 6 Image Hover Effect with CSS Transforms 6

• جلوه شناور منوی خلاق با CSS Transforms 1 Creative Menu Hover Effect with CSS Transforms 1

• جلوه شناور منوی خلاق با CSS Transforms 1 Creative Menu Hover Effect with CSS Transforms 1

• جلوه شناور منوی خلاق با CSS Transforms 2 Creative Menu Hover Effect with CSS Transforms 2

• جلوه شناور منوی خلاق با CSS Transforms 2 Creative Menu Hover Effect with CSS Transforms 2

• جلوه شناور منوی خلاق با CSS Transforms 3 Creative Menu Hover Effect with CSS Transforms 3

• جلوه شناور منوی خلاق با CSS Transforms 3 Creative Menu Hover Effect with CSS Transforms 3

• جلوه شناور منوی خلاق با CSS Transforms 4 Creative Menu Hover Effect with CSS Transforms 4

• جلوه شناور منوی خلاق با CSS Transforms 4 Creative Menu Hover Effect with CSS Transforms 4

• افکت Smoky Text با استفاده از CSS Transforms Smoky Text Effect using CSS Transforms

• افکت Smoky Text با استفاده از CSS Transforms Smoky Text Effect using CSS Transforms

• افکت پر کردن متن در Hover Fill Text Effect on Hover

• افکت پر کردن متن در Hover Fill Text Effect on Hover

• آیکون های رسانه های اجتماعی اثر شناور با تبدیل CSS Social Media Icons Hover Effect with CSS Transforms

• آیکون های رسانه های اجتماعی اثر شناور با تبدیل CSS Social Media Icons Hover Effect with CSS Transforms

CSS نمونه های خلاقانه را تبدیل می کند CSS Transforms Creative Examples

انیمیشن ها و فریم های کلیدی CSS CSS Animations and Keyframes

• معرفی انیمیشن Animation Introduction

• معرفی انیمیشن Animation Introduction

• انیمیشن های CSS را با مراحل بیشتر ایجاد کنید Create CSS Animations with More Stages

• انیمیشن های CSS را با مراحل بیشتر ایجاد کنید Create CSS Animations with More Stages

• ویژگی حالت پر کردن انیمیشن Animation Fill Mode Property

• ویژگی حالت پر کردن انیمیشن Animation Fill Mode Property

• ویژگی تعداد تکرار انیمیشن Animation Iteration Count Property

• ویژگی تعداد تکرار انیمیشن Animation Iteration Count Property

• ویژگی جهت انیمیشن Animation Direction Property

• ویژگی جهت انیمیشن Animation Direction Property

• روش کوتاه نویسی انیمیشن Animation Shorthand Method

• روش کوتاه نویسی انیمیشن Animation Shorthand Method

انیمیشن ها و فریم های کلیدی CSS CSS Animations and Keyframes

نمونه های خلاقانه انیمیشن CSS CSS Animation Creative Examples

• بررسی اجمالی Overview

• بررسی اجمالی Overview

• متن شناور با استفاده از انیمیشن CSS Floating Text using CSS Animation

• متن شناور با استفاده از انیمیشن CSS Floating Text using CSS Animation

• بارگذاری افکت با استفاده از انیمیشن CSS Loading Effect using CSS Animation

• بارگذاری افکت با استفاده از انیمیشن CSS Loading Effect using CSS Animation

• رانندگی با ماشین و موتور سیکلت با استفاده از انیمیشن CSS Driving a Car and a Motorbike using CSS Animation

• رانندگی با ماشین و موتور سیکلت با استفاده از انیمیشن CSS Driving a Car and a Motorbike using CSS Animation

• روتاتور متن با استفاده از انیمیشن CSS Text Rotator using CSS Animation

• روتاتور متن با استفاده از انیمیشن CSS Text Rotator using CSS Animation

• الگوی تصویر متحرک با استفاده از انیمیشن CSS Animated Image Pattern using CSS Animation

• الگوی تصویر متحرک با استفاده از انیمیشن CSS Animated Image Pattern using CSS Animation

• دکمه تکان دادن اثر شناور با انیمیشن CSS Button Shaking Hover Effect with CSS Animation

• دکمه تکان دادن اثر شناور با انیمیشن CSS Button Shaking Hover Effect with CSS Animation

• دکمه متحرک با انیمیشن CSS Animated Button with CSS Animation

• دکمه متحرک با انیمیشن CSS Animated Button with CSS Animation

• نورپردازی متن با انیمیشن CSS Lighting Text with CSS Animation

• نورپردازی متن با انیمیشن CSS Lighting Text with CSS Animation

• ضربان قلب با انیمیشن CSS Heartbeat with CSS Animation

• ضربان قلب با انیمیشن CSS Heartbeat with CSS Animation

• پس زمینه متن متحرک با انیمیشن CSS Animated Text Background with CSS Animation

• پس زمینه متن متحرک با انیمیشن CSS Animated Text Background with CSS Animation

• توپ های پرش با انیمیشن CSS Bouncing Balls with CSS Animation

• توپ های پرش با انیمیشن CSS Bouncing Balls with CSS Animation

• افکت باران با انیمیشن CSS Rain Effect with CSS Animation

• افکت باران با انیمیشن CSS Rain Effect with CSS Animation

• جلوه های شناور نماد با انیمیشن CSS Icon Hover Effects with CSS Animation

• جلوه های شناور نماد با انیمیشن CSS Icon Hover Effects with CSS Animation

• در حال بارگذاری انیمیشن متن Loading Text Animation

• در حال بارگذاری انیمیشن متن Loading Text Animation

• افکت پالس عالی با استفاده از انیمیشن CSS Awesome Pulse Effect using CSS Animation

• افکت پالس عالی با استفاده از انیمیشن CSS Awesome Pulse Effect using CSS Animation

• نمایش اسلایدر تصاویر ساده با انیمیشن CSS Simple Images Slider Show with CSS Animation

• نمایش اسلایدر تصاویر ساده با انیمیشن CSS Simple Images Slider Show with CSS Animation

• تغییر رنگ پس زمینه با انیمیشن CSS Changing Background Color with CSS Animation

• تغییر رنگ پس زمینه با انیمیشن CSS Changing Background Color with CSS Animation

• گهواره نیوتن با انیمیشن CSS Newton's Cradle with CSS Animation

• گهواره نیوتن با انیمیشن CSS Newton's Cradle with CSS Animation

• جلوه بارگذاری خوب با انیمیشن CSS 1 Nice Loading Effect with CSS Animation 1

• جلوه بارگذاری خوب با انیمیشن CSS 1 Nice Loading Effect with CSS Animation 1

• جلوه بارگذاری خوب با انیمیشن CSS 2 Nice Loading Effect with CSS Animation 2

• جلوه بارگذاری خوب با انیمیشن CSS 2 Nice Loading Effect with CSS Animation 2

• جلوه بارگذاری خوب با انیمیشن CSS 3 Nice Loading Effect with CSS Animation 3

• جلوه بارگذاری خوب با انیمیشن CSS 3 Nice Loading Effect with CSS Animation 3

• جلوه بارگذاری خوب با انیمیشن CSS 4 Nice Loading Effect with CSS Animation 4

• جلوه بارگذاری خوب با انیمیشن CSS 4 Nice Loading Effect with CSS Animation 4

• جلوه بارگذاری خوب با انیمیشن CSS 5 Nice Loading Effect with CSS Animation 5

• جلوه بارگذاری خوب با انیمیشن CSS 5 Nice Loading Effect with CSS Animation 5

• جلوه بارگذاری خوب با انیمیشن CSS 6 Nice Loading Effect with CSS Animation 6

• جلوه بارگذاری خوب با انیمیشن CSS 6 Nice Loading Effect with CSS Animation 6

• جلوه بارگذاری خوب با انیمیشن CSS 7 Nice Loading Effect with CSS Animation 7

• جلوه بارگذاری خوب با انیمیشن CSS 7 Nice Loading Effect with CSS Animation 7

• جلوه بارگذاری خوب با انیمیشن CSS 8 Nice Loading Effect with CSS Animation 8

• جلوه بارگذاری خوب با انیمیشن CSS 8 Nice Loading Effect with CSS Animation 8

• پس زمینه متحرک با استفاده از انیمیشن CSS Animated Background using CSS Animation

• پس زمینه متحرک با استفاده از انیمیشن CSS Animated Background using CSS Animation

• انیمیشن شش گوشه لودر Hexagon Loader Animation

• انیمیشن شش گوشه لودر Hexagon Loader Animation

نمونه های خلاقانه انیمیشن CSS CSS Animation Creative Examples