Transitions در CSS3

در بیشتر وبسایت هایی که نکات کاربرد پذیری (رابط کاربری،تجارب کاربری) رو رعایت میکنند،عوامل بسیار زیادی وجود داره که باعث میشه هر بازدیدکننده بیشتر در اون سایت باقی بمونه،یکی از اون ابزارهایی که بستری برای این عوامل ایجاد میکنه،CSS گفته میشه که به فایل نهایی قالب یک وبسایت گفته میشه.یکی از قابلیت های CSS3,قابلیتیه به اسم Transition که معادل فارسی خوبی براش پیدا نکردم تا قرار بدم،مفهوم کلیش اینه که وقتی موس روی یکی از اشیاء صفحه میره،اون شیء چه عکس العملی خواهد داشت.خاصیت Transition متاسفانه با مرورگر Internet Explorer همخوانی نداره و تنها بروی نسخه های بالای ورژن چهار Firefox اجرا میشه،این خاصیت پشتیبان مرورگرهای وبکیت یعنی کروم و سافاری و همچنین اوپرا هست.

این خاصیت پرکاربرد CSS3 را میتوانید در هرجا در تگ HTML قرار دهید.برای مثال ما اینجا این خاصیت را در شیء div به کار میبریم که خیلی کاربرد داره:

div
{
width:100px;
height:100px;
background:red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

خب،کد بالا یک نمونه ساده از CSS که یک باکس تولید میکنه،اما راجب چهار خط آخر،همه اون خط ها در واقع یک خاصیت هستند که برای بهینه شدن در تمام مرورگرها افزایش پیدا کردند،کدها گویای همه چیز هستند.مفهوم چهار خط بالا به این صورته که وقتی موس روی شیء div رفت،عملیات تغییر ساختار و پیکر درونی ۲ثانیه طول خواهد کشید،در این بین چیزی که تغییر میکند،Width شیء است.اما حالا نوبت کدیست که باعث شود شیء نسبت به حرکت موس عکس العمل نشان دهد.

div:hover
 {
 width:300px;
 }

حالا پس از بردن موس بروی شیء div,شاهد این عملکرد خواهیم بود.

این تنها یک مثال بود،شما میتونید از مقادیر Transition کاهش بدید یا افزایششون بدید،زمان تغییر بدید یا هر چیز دیگه ای.

≡ برای دیدن دمو کلیک کنید
منبع : رضاگرافیک | مجله آنلاین گرافیک

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