آموزش انیمیشن های CSS - راهنمای کامل با 100 پروژه!

درس ها Lessons

• 107 - انیمیشن لودر شش گوش 107 - hexagon loader animation

• 62 - جلوه کارت ترجمه پس زمینه 62 - background translation card effect

• 45 - افکت تصویر خلاقانه 7 45 - creative image effect 7

• 86 - نورپردازی متن با انیمیشن css 86 - lighting text with css animation

• 83 - الگوی تصویر متحرک با استفاده از انیمیشن css 83 - animated image pattern using css animation

• 42 - جلوه تصویر خلاقانه 4 42 - creative image effect 4

• 109 - جعبه های پس زمینه در حال رشد انیمیشن با استفاده از انیمیشن های CSS 109 - background boxes growing animation using CSS animations

• 56 - افکت منوی خلاق با استفاده از ویژگی تاخیر انتقال 56 - creative menu effect using the transition delay property

• 81 - رانندگی ماشین و موتور سیکلت با استفاده از انیمیشن css 81 - driving a car and a motor bike using css animation

• 116 - جلوه شناور تصویر به دایره با استفاده از ویژگی مسیر کلیپ CSS 116 - image to circle hover effect using CSS clip path property

• 27 - اثر شناور دکمه خلاقانه 27 - creative button hover effect

• 26 - افکت دکمه 3 دایره به پس زمینه خلاقانه 26 - creative 3 circles to background button effect

• 103 - بارگیری چرخش حلقه ها با استفاده از انیمیشن های CSS 103 - rings rotation loading using CSS animations

• 96 - گهواره نیوتن با انیمیشن های CSS 96 - newton's cradle with CSS animations

• 70 - افکت پر کردن متن در شناور 70 - Fill Text Effect On Hover

• 105 - در حال بارگذاری خطوط با انیمیشن CSS 105 - growing lines loading with CSS animation

• 53 - افکت منوی پس زمینه تقسیم شده خلاقانه 53 - creative splitted background menu effect

• 57 - 2 حاشیه و جلوه منوی پس زمینه 57 - 2 borders and a background menu effect

• 21 - افکت دکمه مقیاس بندی متن خلاقانه 21 - creative text scaling button effect

• 19 - افکت کشیدن دکمه خلاقانه از بالا به پایین با متن 19 - creative button swipe effect from top to bottom with text

• 51 - جلوه منوی مرزهای رشد خلاقانه 51 - creative growing borders menu effect

• 23 - جلوه دکمه 3 لایه چرخان خلاقانه 23 - creative rotating 3 layers button effect

• 59 - جلوه چرخش حاشیه منو خلاق 59 - creative menu border rotation effect

• 31 - جلوه دکمه چرخان حرف اول خلاقانه 31 - creative first letter rotating button effect

• 4- روش های مختلف برای نوشتن ویژگی transition 4 - different ways to write the transition property

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

• 54 - افکت منوی حاشیه های پایین متحرک 2 خلاقانه 54 - creative 2 moving bottom borders menu effect

• 106 - جعبه های پس زمینه با استفاده از انیمیشن های CSS حرکت می کنند 106 - background boxes moving using CSS animations

• 82 - چرخش متن با استفاده از انیمیشن css 82 - text rotator using css animation

• 95 - تغییر رنگ پس زمینه با انیمیشن های CSS 95 - Changing background color with CSS animations

• 5- چه ویژگی هایی را می توان انتقال داد 5 - what properties can be transitioned

• 3 - گزینه های انتقال CSS 3 - CSS transition options

• 11 - مبدا تبدیل CSS 11 - CSS transform origin

• 66 - افکت شناور کارت دو چهره خلاقانه 66 - creative double face card hover effect

• 73 - معرفی انیمیشن 73 - animation introduction

• 99 - جلوه آشکار متن با انیمیشن های CSS 99 - text reveal effect with CSS animations

• 46 - افکت تصویر خلاقانه 8 46 - creative image effect 8

• 12 - به صورت سه بعدی ترجمه کنید 12 - translate in 3D

• 6 - CSS 2D مبانی را تغییر می دهد 6 - CSS 2D transforms basics

• 15 - جلوه دکمه چرخان خلاقانه 15 - creative rotating button effect

• 113 - اثر شناور تصویر خلاق با استفاده از ویژگی مسیر کلیپ CSS 113 - creative image hover effect using CSS clip path property

• 37 - جلوه دکمه کش رفتن مورب با استفاده از حاشیه ها 37 - diagonal swipe button effect using borders

• 8 - تابع مقیاس CSS 8 - CSS scale function

• 55 - جلوه منو تار خلاقانه 55 - creative blurry menu effect

• 79 - متن شناور با استفاده از انیمیشن css 79 - floating text using css animation

• 30 - جلوه دکمه رشد حاشیه خلاقانه 30 - creative border growing button effect

• 34 - افکت دکمه 2 برش خلاقانه 34 - creative 2 cuts button effect

• 114 - افکت پاپ آپ خلاقانه CSS با استفاده از ویژگی مسیر کلیپ CSS 114 - creative CSS pop up effect using CSS clip path property

• 71 - آیکون های رسانه های اجتماعی با تبدیل های css افکت شناور می شوند 71 - social media icons hover effect with css transforms

• 10 - تابع چولگی CSS 10 - CSS skew function

• 67 - افکت شناور کارت لایه لایه خلاقانه 67 - creative layered card hover effect

• 92 - بارگذاری انیمیشن متن 92 - Loading Text Animation

• 41 - افکت تصویر خلاقانه 3 41 - creative image effect 3

• 111 - افکت بارگذاری تقسیم خلاق با استفاده از ویژگی مسیر کلیپ CSS 111 - creative split loading effect using CSS clip path property

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

• 44 - افکت تصویر خلاقانه 6 44 - creative image effect 6

• 84 - افکت شناور تکان دادن دکمه با انیمیشن css 84 - button shaking hover effect with css animation

• 80 - افکت بارگذاری چرخشی با استفاده از انیمیشن css 80 - rotating loading effect using css animation

• 68 - اثر مقیاس بندی خلاقانه کارت 68 - creative scaling card effect

• 52 - پس زمینه خلاقانه و جلوه منو حاشیه 52 - creative background and borders menu effect

• 47 - افکت تصویر خلاقانه 9 47 - creative image effect 9

• 28 - افکت دکمه شکاف خلاقانه 28 - creative splitted button effect

• 20 - اثر درخشان دکمه خلاق 20 - creative button glowing effect

• 90 - افکت باران با انیمیشن css 90 - rain effect with css animation

• 18 - اثر کشش دکمه خلاق 18 - creative button stretching effect

• 25 - تعویض لایه های خلاقانه از چپ به راست 25 - creative layers swapping from left to right button effect

• 16 - جلوه دکمه کشیدن خلاقانه 16 - creative swipe button effect

• 60 - افکت منوی لایه ای رنگارنگ خلاقانه 60 - creative colorful layered menu effect

• 87 - ضربان قلب با انیمیشن css 87 - heartbeat with css animation

• 78 - روش کوتاه نویسی انیمیشن 78 - animation shorthand method

• 77 - خاصیت جهت انیمیشن 77 - animation direction property

• 43 - افکت تصویر خلاقانه 5 43 - creative image effect 5

• 72 - افکت حاشیه متن چرخش خلاق با استفاده از تبدیل CSS 72 - creative rotated text border effect using CSS transforms

• 48 - افکت تصویر خلاقانه 10 48 - creative image effect 10

• 112 - جلوه موجی CSS خلاق با استفاده از ویژگی مسیر کلیپ CSS 112 - creative CSS wavy effect using CSS clip path property

• 94 - نمایش اسلایدر تصاویر ساده با انیمیشن های css 94 - Simple Images Slider Show with css animations

• 118 - افکت تقسیم منو خلاق با استفاده از ویژگی مسیر کلیپ CSS 118 - creative menu split effect using CSS clip path property

• 35 - خلاقانه 2 قسمت افکت دکمه اریب 35 - creative 2 parts skewed button effect

• 7 - تابع ترجمه CSS 7 - CSS tranlsate function

• 36 - افکت دکمه ضربان دار خلاقانه 36 - creative pulsing button effect

• 13 - چرخش سه بعدی 13 - rotate in 3D

• 33 - افکت دکمه مواج خلاقانه 33 - creative wavy button effect

• 117 - اثر شناور تصویر خلاقانه با استفاده از مسیر کلیپ CSS 117 - creative image hover effect using CSS clip path

• 63 - افکت کارت قابل ارتقا خلاق 63 - creative expandable card effect

• 110 - ویژگی CSS clip path چیست و چگونه می توانیم از آن برای ایجاد اشکال استفاده کنیم 110 - what is the CSS clip path property and how we can use it o create shapes

• 104 - محو شدن مربع ها با استفاده از انیمیشن های CSS 104 - fading out squares using CSS animations

• 58 - جلوه منوی تیرانداز از خفا مرز 58 - border sniper menu effect

• 39 - جلوه تصویر خلاقانه 1 39 - creative image effect 1

• 98 - افکت مربع های متحرک با انیمیشن های CSS 98 - moving squares effect with CSS animations

• 89 - توپ های پرش با انیمیشن css 89 - bouncing balls with css animation

• 22 - افکت دکمه مبادله دایره ای خلاقانه 22 - creative circular swapping button effect

• 102 - بارگذاری خطوط در حال رشد با استفاده از انیمیشن های CSS 102 - growing lines loading using CSS animations

• 115 - افکت متن سیاه به سفید و سفید به سیاه با استفاده از مسیر کلیپ CSS 115 - black to white and white to black text effect using CSS clip path

• 100 - بارگذاری حلقه چرخشی با استفاده از انیمیشن های CSS 100 - rotating ring loading using CSS animations

• 40 - افکت تصویر خلاقانه 2 40 - creative image effect 2

• 17 - اثر شناور دکمه خلاقانه 17 - creative button hover effect

• 65 - جلوه کارت مرز خلاق 65 - creative border card effect

• 85 - دکمه متحرک با انیمیشن css 85 - animated button with css animation

• 76 - خاصیت تعداد تکرار انیمیشن 76 - animation iteration count property

• 29 - افکت دکمه تعویض مرز خلاقانه 29 - creative border swapping button effect

• 88 - پس زمینه متن متحرک با انیمیشن css 88 - animated text background with css animation

• 74 - انیمیشن های css با مراحل بیشتر ایجاد کنید 74 - create css animations with more stages

• 97 - جلوه بارگذاری رنگارنگ زیبا با انیمیشن های CSS 97 - nice colorful loading effect with CSS animations

• 2 - CSS transitions چیست 2 - what is CSS transitions

• 9 - تابع چرخش CSS 9 - CSS rotate function

• 49 - افکت تصویر خلاقانه 11 49 - creative image effect 11

• 108 - گسترش جلوه منوی خط با استفاده از انیمیشن های CSS 108 - expanding line menu effect using CSS animations

• 93 - افکت پالس عالی با استفاده از انیمیشن های css 93 - awesome pulse effect using css animations

• 32 - جلوه دکمه در حال رشد 4 مرزی خلاقانه 32 - creative 4 borders growing button effect

• 22 - افکت دکمه مبادله دو لایه خلاقانه 22 - creative two layers swapping button effect

• 101 - جلوه بارگذاری خط با استفاده از انیمیشن های CSS 101 - line loading effect using CSS animations

• 64 - اثر خلاق کاپیتان مارول کارت 64 - creative captain marvel card effect

• 119 - اثر شناور دکمه خلاق با استفاده از ویژگی مسیر کلیپ CSS 119 - creative button hover effect using CSS clip path property

• 69 - افکت متن دودی با استفاده از تبدیل های css 69 - smoky text effect using css transforms

• 1 - انیمیشن های CSS پیشرفته خلاق - 100 پروژه ایجاد کنید! 1 - Creative Advanced CSS Animations - Create 100 Projects!