مشاهده تصویر بزرگتر

خاصیت transition در css3

خاصیت transition در css3 | صفت transition در css3 | آموزش transition

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

خاصیت transition در css3

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

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

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

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

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

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

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

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

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

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

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

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

transition-property
transition-duration
transition-timing-function
transition-delay

شما می توانید این 4 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید.

خاصیت transition در css3

1- transition-property

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

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

2- transition-duration

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

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

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