خاصیت transition در css3 تعیین افکت تغییر در تگ html
در این مقاله از سایت آموزی جهت استفاده شما عزیزان به بررسی و توضیح خاصیت transition در css می پردازیم.
ویژگی کاربردی transition در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
خاصیت transition در css3 تعیین افکت تغییر در تگ html
معرفی و کاربرد صفت transition در زبان طراحی سی اس اس
خاصیت transition در css3 به همراه افکت هایی که با آن به کار می برید، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد.
صفت transition ، جهت تعیین افکت تغییر یا ترانزیشن در تگ html به کار می رود.
برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید.
و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید.
سپس هنگامی که کاربر موس خود را از روی آن می برد، به انداز قبلی و کوچک خود بر گردد.
به وسیله خاصیت transition در css3 ، می توانید تغییر اندازه ، شکل ، رنگ ، موقعیت و … یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید.
برای این منظور شما بایستی 3 مرحله زیر را انجام دهید :
عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید.
تغییری که در عنصر html می خواهید اعمال نمایید را به وسیله خواص CSS تعیین کنید. مثلا می خواهید اندازه یا رنگ یک عنصر html را تغییر دهید.
مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای افکت یا ترانزیشن را تعیین نمایید.
شکل کلی استفاده و ساختار دستوری خاصیت transition در سی اس اس به صورت زیر است:
transition: property duration timing-function delay ;
مثال : transition : width 2s ease 1s ;
خاصیت transition در سی اس اس مخفف 4 خاصیت زیر است:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
شما می توانید این 4 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت مختصرنویسی شده به ترتیب زیر قرار دهید:
1 | p { transition: width .35s ease-in-out; } |
مقادیر صفت کاربردی transition در زبان طراحی سی اس اس
صفت transition که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:
- مقدار transition-property
- مقدار transition-duration
- مقدار transition-timing-function
- مقدار transition-delay
- مقدار initial
- مقدار inherit
خاصیت transition در css3 تعیین افکت تغییر در تگ html
مقدار transition-property درون خاصیت transition در زبان سی اس اس
این مقدار تعیین کننده خاصیتی است که شما می خواهید آن را در عنصر مورد نظرتان تغییر دهید.
برای مثال این خاصیت می تواند عرض عنصر ( خاصیت width ) یا رنگ آن ( خاصیت color ) باشد. تعیین این مقدار اجباری است.
1 | p { transition-property: color , width; } |
مقدار transition-duration درون خاصیت transition در زبان سی اس اس
این مقدار مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت دهد را بر حسب ثانیه تعیین می کند.
مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود.
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار 0 را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت.
برای مثال اگر 2 ثانیه تعیین شود، مدت زمان اجرای تغییر افکت یا ترانزیشن 2 ثانیه خواهد شد.
1 | p { transition-duration: 2s; } |
مقدار transition-timing-function درون خاصیت transition در زبان سی اس اس
مقدار transition-timing-function در css3 تعیین کننده سرعت افکت تصویری برای انجام عملیات است.
1 | p { transition-timing-function: ease; } |
مقدار transition-delay درون خاصیت transition در زبان سی اس اس
مقدار transition-delay در css3 ، مدت زمان تاخیر انجام افکت تغییر ، پس از درخواست آن به مرورگر را تعیین می کند.
برای مثال اگر 2 ثانیه تعیین شود، افکت تغییر یا ترانزیشن پس از 2 ثانیه فعال خواهد شد .
1 | p { transition-delay: 2s; } |
مقدار initial درون خاصیت transition در زبان سی اس اس
اگر خاصیت transition را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت transition در زبان سی اس اس
اگر خاصیت transition را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
خاصیت transition در css3 تعیین افکت تغییر در تگ html
بررسی ویژگی transition از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی transition در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت transition در زبان طراحی سی اس اس
عناوین ساختاری خاصیت transition | وضعیت ساختاری خاصیت transition |
مقدار پیش فرض | all 0s ease 0s |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.transition="all 2s |
پشتیبانی مرورگرهای اینترنتی از صفت transition در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| transition | 26.0 به بالا و 4.0 تا 26.0 با -webkit- | 10.0 | 16.0 به بالا و 4.0 تا 16.0 با -moz- | 6.1 به بالا و 3.1 تا 6.1 با -webkit- | 12.1 به بالا و 10.5 تا 12.1 با -o- |
ثبت ديدگاه