تغییر وضعیت در css3 به شما این امکان را می دهد که مقادیر صفات را بر اساس مدت زمانی که تعیین می کنید به آرامی تغییر دهید(از یک مقدار به مقداری دیگر). 

پشتیبانی مرورگر

اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که از این صفت بطور کامل پشتیبانی می کند. اعدادی که به همراه -webkit- ، -moz- یا -o- هستند نشان دهنده اولین نسخه از مرورگر هستند که با prefix کار می کند.

نحوه استفاده از تغییر وضعیت ها در css3

برای ایجاد یک جلوه تغییر وضعیت ، باید دو مورد را مشخص کنید :

• صفتی که می خواهید این جلوه را بر روی آن اعمال کنید
• مدت زمان جلوه

نکته ! اگر قسمت مدت زمان را تعریف نکنید ، تغییر وضعیت ، جلوه ای نخواهد داشت، زیرا مقدار آن 0 است.

مثال زیر یک عنصر <div> قرمز رنگ با عرض و ارتفاع 100 پیکسل را نمایش می دهد. همچنین عنصر <div> دارای یک جلوه تغییر وضعیت برای صفت width آن می باشد که طول آن 2 ثانیه است.

مثال : 

جلوه تغییر وضعیت زمانی آغاز می شود که مقدار صفت مشخص شده تغییر کند.
حال به صفت width مقداری جدید می دهیم تا کاربر با ماوس روی عنصر <div> اشاره کند و تغییر اجرا شود.

مثال : 

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

تغییر مقادیر چند صفت

مثال زیر یک جلوه تغییر وضعیت برای هر دو صفات width و height تعریف می کند که مدت زمان تغییر عرض 2 ثانیه و ارتفاع 4 ثانیه می باشد.

مثال : 

تعریف منحنی سرعت تغییر وضعیت

صفت transition-timing-function منحنی سرعت جلوه تغییر وضعیت را تعریف می کند.
صفت transition-timing-function می تواند مقادیر زیر را داشته باشد

ease - شروع کند ، امتداد سریع و پایان کند(پیش فرض)
linear - سرعت برابر در آغاز و پایان
ease-in - شروع کند
ease-out - پایان کند
ease-in-out - شروع و پایان کند
cubic-bezier(n,n,n,n) - تعیین مقادیر دلخواه

مثال زیر تعدادی از منحنی های قابل استفاده را نمایش می دهد.

مثال : 

 

تاخیر در جلوه تغییر وضعیت

صفت transition-delay تاخیر در جلوه تغییر وضعیت را بر اساس ثانیه تعریف می کند.
در مثال زیر ، یک ثانیه تاخیر در شروع جلوه تعریف شده است.

مثال : 

 

تغییر وضعیت و ترنسفرم

مثال زیر یک ترنسفرم به جلوه تغییر وضعیت اضافه کرده است.

مثال : 

 

مثال دیگر : 
تغییر وضعیت های css3 می توانند یک به یک تعریف شوند ، مانند : 

 

یا با استفاده از صفت کوتاه نویسی شده transition :