آموزش CSS 3 - انیمیشن عناصر - خاصیت transition
خاصیت transition :
خاصیت transition به همراه افکت هایی که با آن به کار می برید ، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد .
برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد ، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید . سپس هنگامی که کاربر موس خود را از روی آن می برد ، به انداز قبلی و کوچک خود بر گردد .
به وسیله خاصیت transition در CSS 3 ، می توانید تغییر اندازه ، شکل ،رنگ ، موقعیت و ... یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید .
برای این منظور شما بایستی 3 مرحله زیر را انجام دهید :
1.عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید .
2.تغییری که در عنصر می خواهید اعمال نمایید را به وسیله خواص CSS تعیین کنید . مثلا می خواهید اندازه یا رنگ یک عنصر را تغییر دهید .
3. مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای آن را تعیین نمایید .
شکل کلی استفاده و ساختار دستوری خاصیت transition به صورت زیر است :
Syntax
transition: property duration timing-function delay ;
مثال : transition : width 2s ease 1s ;
نکته مهم : خاصیت transition مخفف و ساده شده 4 خاصیت زیر است .
transition-property
transition-duration
transition-timing-function
transition-delay
شما می توانید این 4 خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید . توضیحات کامل راجع هر یک از این خاصیت را در صفحات مربوط به آنها قرار داده ایم . برای دریافت اطلاعات راجع به هر کدام بر روی نام آن کلیک نمایید .
توضیح هر یک از موارد syntax
پارامتر : property
این پارامتر تعیین کننده خاصیتی است که شما می خواهید آن را در عنصر مورد نظرتان تغییر دهید . برای مثال این خاصت می تواند عرض عنصر ( خاصیت width ) یا رنگ آن ( خاصیت color ) باشد .
تعیین این پارامتر اجباری است .
پارا متر : duration
این خاصیت مدت زمانی که طول می کشد تا عنصر از حالت اول به حالت دوم تغییر وضعیت دهد را بر حسب ثانیه تعیین می کند . مسلما هر چه مقدار آن بیشتر باشد ، این عمل به صورت آهسته تر انجام می شود .
تعیین این پارامتر اجباری است ، اگر مقدار آن را تعیین نکنید ، مقدار 0 را خواهد داشت و در این حالت هیچ افکت تصویری و انمیشین نخواهیم داشت .
پارامتر : timing-function
این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است .
پارا متر : delay
این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند . برای مثال اگر 3 ثانیه تعیین شود ، افکت پس از 3 ثانیه فعال خواهد شد .
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت در مرورگر IE پشتیانی نمی شود ( مگر در نسخه 10 در آینده ) و توسط
هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در
مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر آمده را استفاده
نمود :
مرورگر فایر فاکس :
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی
این مرورگر باید خاصیت را به صورت moz-transition- بنویسید .
مرورگر اپرا :
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت o-transition- بنویسید .
مرورگر کروم :
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت webkit-transition- بنویسید .
دوستان برای این که زحمت های انتشار دهنده این اموزش هدر نره من لینک مستقیم آموزش و تمام مثال هارو برای شما قرار میدم و میتونید از آنها استفاده کنید من که خیلی استفاده کردم و از اینجا ازش تشکر میکنم
آدرس آموزش :
www.developer1.ir/CSS_3/main.aspx
من همین الآن دقیقا داشتم همین پستش رو میخوندم
