همراه با معرفی CSS3، بسیاری از ویژگی های جدید وجود دارد که برای استفاده در ایجاد جلوه های عالی در دسترس هستند. یکی از مفیدترین آنها است انتقال دارایی

ویژگی transition یک توسعه جدید مهم در CSS است. می توان از آن برای ایجاد یک اثر تغییر پویا استفاده کرد روی یک div یا کلاس با استفاده از یک ساختار ساده:

transition: property duration timing-function delay;

انتقال CSS3 یک راه عالی برای افزودن کمی انیمیشن به سایت‌ها بدون سربار بزرگ یک کتابخانه جاوا اسکریپت مانند jQuery است.

نسخه ی نمایشی

قبل از شروع، می توانید یک نسخه ی نمایشی را در اینجا ببینید ویژگی انتقال در عمل.

اموال

ابتدا، برای اینکه ویژگی transition کار کند، ویژگی استانداردی که برای آن اعمال خواهد شد باید تعریف شود. مسلماً دو ویژگی متداول که تعریف خواهند شد عبارتند از عرض و ارتفاع برای نوشتن ملک به صورت مستقل به سادگی از موارد زیر استفاده کنید:

transition-property: define property

تغییر اندازه

دنبال کردن روی، هنگامی که ویژگی تعریف شد، باید مقادیر شروع و پایان تخصیص داده شود. در مورد مقادیری مانند عرض یا ارتفاع، ویژگی باید با یک مقدار شروع و سپس یک مقدار پایان با یک شرط دیگر تنظیم شود.

به عنوان مثال، در اینجا ویژگی transition را روی width، سپس مقدار شروع عرض و سپس مقدار پایان را هنگامی که عنصر روی ماوس قرار می‌گیرد، تنظیم می‌کنیم:

#mainheader {
 transition-property:width;
 width:50px; 
}
#mainheader:hover {
 width:75px;
}

مدت

اکنون که ویژگی تبدیل، مقادیر شروع و پایان را تعریف کردیم، باید مدت زمان انتقال را تعریف کنیم. این با تعریف طول در ثانیه یا میلی ثانیه به صورت زیر به دست می آید:

transition-duration: duration;

با ساختن این در مثال کد زیر ایجاد می شود:

#mainheader {
 transition-property:width;
 transition-duration:0.5s; 
 width:500px;
}
#mainheader:hover {
 width:750px;
}

این به این معنی است که div اصلی 25 پیکسل در مدت زمان 5 ثانیه گسترش می یابد.

عملکرد زمان بندی

کد برای ایجاد یک افکت خوب کافی است، اما می‌توانیم با استفاده از ویژگی انتقال CSS3 بیشتر استفاده کنیم زمان-عملکرد با استفاده از این ویژگی می توان منحنی سرعت مدت زمان انتقال را تغییر داد. ویژگی transition به طور پیش فرض روی یک منحنی خطی تنظیم شده است. با این حال، می توانید برای تغییر منحنی سرعت، ease، ease-in، ease-out، ease-in-out و حتی bezier مکعبی را تعریف کنید. Cubic-bezier به شما امکان می دهد مقادیر خود را با استفاده از (n,n,n,n) تعریف کنید که n می تواند بین 0 و 1 باشد (به عنوان مثال خطی (0,0,1,1) خواهد بود).

افزودن این کد به مثال ما به این نتیجه می رسد:

#mainheader {
 transition-property:width;
 transition-timing-function:ease-in-out; 
 transition-duration:0.5s; 
 width:500px;
}
#mainheader:hover {
 width:750px;
}

تاخیر

علاوه بر این، دقیقاً مانند transition-duration، با استفاده از ویژگی transition-delay یک مکث قبل از شروع اثر گذار تعریف می‌کند:

transition-delay: time;

نتیجه گیری

در نهایت، در نظر گرفتن دو چیز هنگام استفاده از ویژگی انتقال CSS3 مهم است. اولا، اکثر مرورگرهای موجود در حال حاضر برای استفاده از آن به پیشوند مرورگر نیاز دارند (به استثنای IE10، Opera و Firefox16+):

-moz-transition: برای فایرفاکس 15
-webkit-transition: برای کروم و سافاری

(به خاطر داشته باشید که IE9 و پایین تر از ویژگی انتقال به هیچ وجه پشتیبانی نمی کند.)

ثانیاً، اگرچه برای وضوح در مثال‌های بالا از دست بلند استفاده کرده‌ام، نوشتن به شکل کوتاه، به شرح زیر، بهترین عمل در نظر گرفته می‌شود:

#mainheader {
 -moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */
 -webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */
 transition: width ease-in-out 0.5s 0.1s;
 width:500px;
}
#mainheader:hover {
 width:750px;
}

آیا از ویژگی انتقال CSS3 استفاده می کنید؟ چگونه با توئین های مبتنی بر jQuery مقایسه می شود؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر متحرک از طریق Shutterstock.