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

نتیجه :

برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :

همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :

همان طور که مشاهده می کنید، برای عنصر div ، پنج مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :

این عبارت، تعیین کرده است که تغییرات تدریجی، تنها باید برای مشخصه background-color اعمال شود. اگر بخواهیم موارد دیگری نیز به صورت تدریجی تغییر کنند، باید آنها را در جلوی عبارت، ذکر کنیم. مثلا فرض کنید اگر می خواستیم که مشخصه width نیز دارای تغییرات تدریجی باشد، باید کد زیر را می نوشتیم :

مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم.

ادامه کدهای CSS ، به صورت زیر می باشد :

عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به رنگ آبی تغییر پیدا کند.