دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » فیلم آموزش Transition در CSS3
فیلم آموزش Transition در CSS3

فیلم آموزش Transition در CSS3

در این قسمت از فیلم آموزش CSS3 درباره دستور Transition آموزش داده شده است ، در این  آموزش Transition  همه ویژگی های transition آموزش داده شده است که در فیلم آموزشی می توانید مشاهده کنید .

آموزش Transition :

وقتی این ویژگی Transition رو برای یک عنصر تعریف بکنیم ، کاربر می تواند آن عنصر را به صورت متحرک در طول زمان مشاهده کند و همین موضوع باعث می شود که کاربر متوجه تغییرات انجام شده بشود و با این کار زیبایی خاصی به عناصر می توانیم بدهیم و هم چنین تجربه کاربری بهتری هم دارد .

 

همه ویژگی های دستور transition به صورت زیر می باشد . ترتیب نوشتن آن ها هم خیلی مهم می باشد :

transition-property

transition-duration

transition-timing-function

transition-delay

ویژگی transition-property : 

با این ویژگی اون عنصری را انتخاب می کنیم که می خواهیم تغییر آن را مشاهده کنیم .

ویژگی transition-duration :

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

ویژگی transition-timing-function  : 

این ویژگی یک تابع است و مشخص می کند این عنصری را که انتخاب کرده ایم که در یک زمان مشخص به ما نشان داده شود ، این ویژگی به چه صورت نمایش داده شود مثلاً زود شروع بشه و یک هویی تموم بشه یا بلعکس . اگه فیلم رو مشاهده کنید در انتهای فیلم این تابع رو به صورت کامل توضیح دادم  .

ویژگی transition-delay : 

این ویژگی مدت زمان مکص قبل از اعمال transition رو مشخص می کند .

به این شکل نوشتن باعث میشه حجم کد بالا بره و هم یکم شلوغ بشه به جای این که تک تک بنویسید می تونید به صورت یک جا همه مقادیر ویژگی ها رو داخل transition بنویسید در این جا هم باید ترتیب نوشتن رو رعایت کنید  .

نکته : به این نکته هم توجه کنید که باید مقدار یک عنصر تغییر پیدا کنه تا بشود با استفاده از transition تغییرات آن را مشاهده کرد ، برای این کار از دستور hover یا دستور active می توانید استفاده کنید .

کد HTML در آموزش Transition : 

کد CSS

در عین حال می تونید به چندین عنصر دستور transition رو بدید مثل کد زیر که باید برای جدا کردن از ویرگول استفاده کنید .

 

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

نکات بیش تر در فیلم آموزش Transition توضیح داده شده است .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *