در این مطلب به بعد قصد داریم تا یکی دیگر از نکات موجود درزبان برنامه نویسی CSS3 را مورد بررسی قرار دهیم و آن هم انیمیشن عناصر است که در این زبان وجود دارد.قصد داریم تا شما را با خواص این مفهوم آشنا کنیم.
خاصیت transition :
خاصیت transition به همراه افکت هایی که با آن به کار می برید ، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد .
برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد ، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید . سپس هنگامی که کاربر موس خود را از روی آن می برد ، به انداز قبلی و کوچک خود بر گردد .
به وسیله خاصیت transition در CSS 3 ، می توانید تغییر اندازه ، شکل ،رنگ ، موقعیت و … یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید .
برای این منظور شما بایستی ۳ مرحله زیر را انجام دهید :
- عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید .
- تغییری که در عنصر می خواهید اعمال نمایید را به وسیله خواص CSS تعیین کنید . مثلا می خواهید اندازه یا رنگ یک عنصر را تغییر دهید .
- مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای آن را تعیین نمایید .
شکل کلی استفاده و ساختار دستوری خاصیت transition به صورت زیر است :
;Syntax :transition: property duration timing-function delay
;transition : width 2s ease 1s:مثال
نکته مهم : خاصیت transition مخفف و ساده شده ۴ خاصیت زیر است .
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
