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

اموزش transition در css3

اموزش ایجاد افکت در css با ترنزیشن ها

  transitionin Css3

جلسه اول

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – سی اس اس قصد اموزش کامل طراحی افکت های جذاب برای وب سایت در css3 داریم در این مبحث به اموزش transition در css3  می پردازیم ما را تا اتمام این اموزش همراهی کنید.

 

ترنیزیشن / transition ها در سی اس اس / css

این قابلیت بسیار جذاب در css به شما این امکان را میدهد تا افکت های بسیار زیبا برای سایت ها و صفحات وب خود طراحی کنید برای مثال تغییر رنگ لینک هنگام پیمایش موس روی ان یا تغییر رنگ بگ گراند صفحه و … کاربرد این مبحث در طراحی وب بسیار زیاد و کاربردی می باشد

 

شروع کار (پیوست یک فایل css در صفحه)

شاید اولین سوال شما نحوه کارکردن این متد می باشد برای کار با ترنزیشن ها کافیست یک فایل css به صفحه خود الحاق کنید برای مثال فایل test.css را به یک صفحه html پیوست می کنیم که از کد زیر استفاده میشود

حال که فایل css خود را به صفحه وب خود متصل کردیم اکنون می توانیم کد نویسی در سی اس اس را شروع کنیم

 

transition چگونه کار میکند؟

این متد به صورت زیر اجرا میشود

Property: تعیین می کند انیمیشن روی کدام خاصیت اجرا شود (ارتفاع ،رنگ و …) اگر به جای ان all وارد شود برروی تمام خواص تاثیر میگذارد

duration:مدت زمان مورد نیاز برای اجرا انیمیشن می باشد برای مثال می توانید ۰٫۸ وارد کنید و …

time-function: شامل مقادیر زیر می باشد

  • linear : انیمیشن یکنواخت می باشد
  • Ease : شروع افکت با سرعت کم و سپس زیاد و درانتها دوباره کاهش می یابد
  • ease-in : شروع با سرعت زیاد و سپس کم میشود
  • ease-out: با سرعت زیاد افکت اجرا و سپس سرعت کم می شود
  • ease-in-out: انیمیشن با سرعت کم شروع بین انیمیشن یکم سرعت افزایش پیدا می کنه و با سرعت کم به اتمام میرسه

 

 

مثال کار با transition در css3

برای این کار در div که در کد اول موجود می باشد یک لینک ساخته و به ان یک کلاس به نام test بدهید و از کد زیر در فایل css استفاده کنید

 


 

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

این بود از اموزش ترنزیشن جلسه اول به زودی با جلسات بعدی اموزش به شما همراه خواهیم بود امید واریم از این اموزش استفاده کافی برده باشید.

 

مطالب پیشنهادی:

سئو محتوا تگ های مهم html برجسته سازی در css

پاسخ دهید

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