خاصیت transition در css3 تعیین افکت تغییر در تگ html

در این مقاله از سایت آموزی جهت استفاده شما عزیزان به بررسی و توضیح خاصیت transition در css می پردازیم.

ویژگی کاربردی transition در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

خاصیت transition در css3 تعیین افکت تغییر در تگ html

معرفی و کاربرد صفت transition در زبان طراحی css

خاصیت transition در css3 به همراه افکت هایی که با آن به کار می برید، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد.

صفت transition ، جهت تعیین افکت تغییر یا ترانزیشن در تگ html به کار می رود.

برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید.

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

سپس هنگامی که کاربر موس خود را از روی آن می برد، به انداز قبلی و کوچک خود بر گردد.

به وسیله خاصیت transition در css3 ، می توانید تغییر اندازه ، شکل ، رنگ ، موقعیت و … یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید.

برای این منظور شما بایستی ۳ مرحله زیر را انجام دهید :

عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید.

تغییری که در عنصر html می خواهید اعمال نمایید را به وسیله خواص سی اس اس تعیین کنید. مثلا می خواهید اندازه یا رنگ یک عنصر html را تغییر دهید.

مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای افکت یا ترانزیشن را تعیین نمایید.

شکل کلی استفاده و ساختار دستوری خاصیت transition در سی اس اس به صورت زیر است:

transition: property   duration   timing-function   delay ;
مثال : transition : width   ۲s   ease   ۱s ;

خاصیت transition در سی اس اس مخفف ۴ خاصیت زیر است:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

شما می توانید این ۴ خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت مختصرنویسی شده به ترتیب زیر قرار دهید:

[html] p { transition: width .35s ease-in-out; } [/html]

مقادیر صفت کاربردی transition در زبان طراحی سی اس اس

صفت transition که در زبان طراحی CSS3 معرفی شده است، ۶ مقدار می پذیرد که عبارتند از:

  1. مقدار transition-property
  2. مقدار transition-duration
  3. مقدار transition-timing-function
  4. مقدار transition-delay
  5. مقدار initial
  6. مقدار inherit

خاصیت transition در css3 تعیین افکت تغییر در تگ html

مقدار transition-property درون خاصیت transition در زبان css

این مقدار تعیین کننده خاصیتی است که شما می خواهید آن را در عنصر مورد نظرتان تغییر دهید.

برای مثال این خاصیت می تواند عرض عنصر ( خاصیت width ) یا رنگ آن ( خاصیت color ) باشد. تعیین این مقدار اجباری است.

[html] p { transition-property: color , width; } [/html]

مقدار transition-duration درون خاصیت transition در زبان سی اس اس

این مقدار مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت دهد را بر حسب ثانیه تعیین می کند.

مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود.

تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار ۰ را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت.

برای مثال اگر ۲ ثانیه تعیین شود، مدت زمان اجرای تغییر افکت یا ترانزیشن ۲ ثانیه خواهد شد.

[html] p { transition-duration: 2s; } [/html]

مقدار transition-timing-function درون خاصیت transition در زبان css

مقدار transition-timing-function در css3 تعیین کننده سرعت افکت تصویری برای انجام عملیات است.

[html] p { transition-timing-function: ease; } [/html]

مقدار transition-delay درون خاصیت transition در زبان سی اس اس

مقدار transition-delay در css3 ، مدت زمان تاخیر انجام افکت تغییر ، پس از درخواست آن به مرورگر را تعیین می کند.

برای مثال اگر ۲ ثانیه تعیین شود، افکت تغییر یا ترانزیشن پس از ۲ ثانیه فعال خواهد شد .

[html] p { transition-delay: 2s; } [/html]

مقدار initial درون خاصیت transition در زبان css

اگر خاصیت transition را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت transition در زبان سی اس اس

اگر خاصیت transition را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

خاصیت transition در css3 تعیین افکت تغییر در تگ html

بررسی ویژگی transition از نظر نسخه زبان طراحی css

ویژگی کاربردی transition در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت transition در زبان طراحی سی اس اس