صفحه اصلی / css / اموزش transition در css – انیمیشن سازی با css3

اموزش transition در css – انیمیشن سازی با css3

اموزش transition در css3

بخش اول انیمیشن سازی با css3

با سلام خدمت شما همراهان عزیز مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی و توسعه – اموزش css قصد اموزش transition به همراه ویژگی و کاربرد ان را داریم که به صورت کلی در بحث انیمیشن های وب و متحرک سازی به همراه خواص دیگری همچون transform ها برای افزایش قابلیت ها و یا استفاده از خود animation قرار میگیرد. برای اینکه برروی تمامی این مطالب مسلط شوید و به یک توسعه دهنده رابط کاربری و تجربه کاربری خوب تبدیل شوید در این سری از پست ها همراه ما شوید.

 

بودن یا نبودن transition  مسئله این است !

 

See the Pen eGPGRY by s,mohamamd hosein abedy (@shomasoft) on CodePen.

معرفی کد transition در css3 :

یکی از قابلیت های مهم css3 قابلیت متحرک سازی و انیمیشن سازی بدون استفاده از پلاگین های پیچیده همچون فلش می باشد در نتیجه با مفهوم هایی همچون transition و transfrom و animation در این نسخه از css سروکار داریم.

به صورت کلی کد ترنزیشن در سی اس اس به شکل زیر نوشته میشود.

transition: transition-property transition-delay transition-timing-function transition-duration;

هریک از مقادیر بالا جداگانه و به صورت تکی نیز نوشته میشوند برای مثال و یادگیری نحوه استفاده از ترنزیشن به کد های پایین توجه کنید

در قسمت اول کد به صورت کلی بیان شده برای این کار تنها از transition استفاده میشود مقادیری که این کد میپذیرد به چهارد دسته زیر تقسیم میشود که هریک را شرح داده ایم.

  1. transition-property : تعیین میکند به خاصیتی تعلق گیرد برای مثال background-color  یا width یا … برای خواص کلی از all استفاده میشود.
  2. transition-timing-function : تعیین میکند زمان بندی به چه شکلی باشد که شامل مقادیر ease / ease-in / ease-out / ease-in-out  و linear می باشد همچنین برای انکه خودتان یک فانکشن جدید بسازید از cubic-bezier() استفاده میشود که چهار مقدار عددی را به صورت cubic-bezier(1,2,3,4) l ا  می پذیرد. برای اشنایی با این مقادیر از این لینک استفاده کنید. اشنایی با time-function 
  3. در قسمت اخر transition-duration  و یا مدت زمان transition به کار میرود که به ثانیه بیان میشود.
  4.  transition-delay :  موجب شروع transition به همراه تاخیر می باشد و به صورت ثانیه بیان میشود.

برای مثال اگر بخواهیم بکگراند و یا پس زمینه یک جعبه در صفحه با رفتن موس برروی ان تغییر دهیم از کد transition در رویداد hover به شکل زیر استفاده میشود. 

 

 

See the Pen oGaGNL by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

در کد های بالا ابتدا خواص جعبه خود را تعریف کردیم سپس در رویداد hover یعنی هنگامی که موس برروی div یا جعبه مورد نظر رفت کد transition خود را به همراه سه ویژگی که در بالا تعریف شد به کار بردیم.

نکته قابل توجه وجود کدهایی به شکل زیر می باشد.

که موجب اجرای درست این کد در مرورگرهایی با هسته webkit مانند سافاری یا اپرا و همچنین موزیالا میشود.

 

نوشتن ترکیبی ترنزیشن / transition  در css :

اگر شما در کدهای مربوط به transition-property از all استفاده کنید این مقدار شامل width و height همچنین خواص دیگری همچون انواع پوزیشن ها و … نمی شود در نتیجه می بایست از شیوه زیر برای این کار استفاده کنید.

 

 

See the Pen XexejJ by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

این بود از «اموزش transition در css – انیمیشن سازی با css3»  شما میتوانید با تنظیم ترنزیشن برای خاصیت های دیگر همچون مکان یک عنصر پویا سازی پیشرفته تری را طراحی کنید. امیدواریم از این اموزش استفاده کافی را برده باشید سوالات و نظرات خود را در قسمت دیدگاه ها برای ما ارسال کنید.

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *