قابلیت‌های CSS3 – درباره CSS Transitions

نوشته فرهاد عیدی 16 مرداد 1390

به احتمال زیاد تا کنون وب‌سایت‌ها و وبلاگ‌های گوناگونی را دیده‌اید که وقتی موس را روی لینک‌ها، تصاویر، متن‌ها و … می‌برید به جای آن‌که همان لحظه رنگ آن‌ها عوض شده و حالت‌شان تغییر کند، این عمل در یک برهه زمانی یک یا دو ثانیه‌ای اتفاق می‌افتد و افکت زیبایی به آن می‌بخشد.

css-transitions.jpg

به عنوان مثال اگر در آخرین نسخه از مرورگرهای کروم، فایرفاکس یا اپرا وبلاگینا را مشاهده می‌کنید، با بردن نشانگر موس روی تیتر همین مطلب متوجه منظورم خواهید شد. به راحتی متوجه می‌شوید که به جای اینکه تغییرات مربوط به Hover شدن تیتر مطلب در یک لحظه انجام شود، این عمل تا دو ثانیه به طول می‌انجامد و باعث ایجاد افکتی زیبا می‌شود.

اما چگونه باید این کار را انجام دهیم؟ در نسخه‌ی جدید CSS یعنی CSS3 یک قابلیت با نام CSS Transition‌ اضافه شده است که کار آن دقیقا همین است. یعنی شما می‌توانید یک فاصله بین تغییری که قرار است ایجاد شود به وجود آورید. مثالی می‌زنم که بهتر متوجه شوید:

css-transitions-01.jpg

فرض کنید لینک‌های شما به رنگ آبی در صفحات وب مشخص شده‌اند. شما می‌خواهید وقتی نشانگر موس روی آن می‌رود لینک شما تغییر رنگ داده و به رنگ قرمز تبدیل شود. در حالت عادی، به محض رفتن موس روی لینک، رنگ آن تغییر می‌کند اما در صورتی که از قابلیت CSS Transition استفاده کنید بستگی به مقادیر داده شده، این تغییر در یک بازه‌ی زمانی انجام می‌پذیرد. به نمونه زیر نگاه کنید:

.code {
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay:1s;
}

یا همچنین می‌توانید تمام دستورات بالا را در یک سطر به صورت زیر به کار ببرید:

transition: all 2s linear 1s;

این دستور چهار مولفه دارد که در ادامه به توضیح هریک از آنها می‌پردازیم:

transition-property

در این دستور مشخص می‌کنیم کدام یک از ویژگی‌های عنصر باید در دستور کار این قابلیت قرار گیرند. شما می‌توانید فقط width یا height یا Background یا عبارات دیگر را در این دستور قرار دهید و اگر مقداری برای این دستور قرار ندهید، همه‌ی ویژگی‌های عنصرتان در دستور کار transition قرار خواهند گرفت. مثلا در عنصر زیر، فقط دستور width به صورت transition اجرا شده است پس هنگام ایجاد افکت، ارتفاع و رنگ آن جزو دستور کار قرار نمی‌گیرد و به صورت لحظه‌ای تغییر می‌کند.

transition-duration

این دستور مشخص می‌کند تغییرات روی عنصر شما در چند ثانیه اعمال شود. شما عدد مورد نظر را بر حسب ثانیه باید وارد نمایید. به عنوان مثال باکس زیر طوری مقداردهی شده است که در 2 ثانیه رنگ آن تغییر کند. با نگه داشتن نشانگر موس روی آن می‌توانید شاهد این تغییر باشید.

transition- timing-function

شاید توضیح این قسمت کمی سخت باشد. با این دستور شما نحوه‌ی اعمال تغییرات در بازه‌ی زمانی داده شده را مشخص می‌سازید. یعنی ممکن است بخواهید که در تمام مدت تغییرات، سرعت تغییرات ثابت باشد بنابراین از دستور linear استفاده می‌کنید. اگر دوست داشته باشید در ابتدا کند، سپس تند شود از دستور ease-in و اگر خواستید بالعکس این قضیه باشد از ease-out استفاده می‌کنید و همین‌طور دستورات دیگر که می‌توانید نمونه‌ی کاملا واضح آن را در این صفحه مشاهده نمایید.

transition-delay

با این دستور مشخص می‌سازید بعد از چه مدت عنصر شما شروع به تغییر کند. به عنوان مثال در جعبه‌ی زیر این زمان در 2 ثانیه تنظیم شده است. یعنی با نگه داشتن نشانگر موس به مدت 2 ثانیه روی آن، رنگ جعبه شروع به تغییر می‌کند.

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