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

فرض کنید لینک‌های شما به رنگ آبی در صفحات وب مشخص شده‌اند. شما می‌خواهید وقتی نشانگر موس روی آن می‌رود لینک شما تغییر رنگ داده و به رنگ قرمز تبدیل شود. در حالت عادی، به محض رفتن موس روی لینک، رنگ آن تغییر می‌کند اما در صورتی که از قابلیت 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 قرار خواهند گرفت.

transition-duration

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

transition- timing-function

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

transition-delay

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

امیدوارم که این مقاله مورد پسند شما بوده باشد. با آرزوی موفقیت برای شما برنامه نویس عزیز.