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

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 توضیح داده شده است .

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

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

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

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


  1. ramin گفت:

    سلام آموزش خوبی بود
    خسته نباشید
    ممنون

  2. 111 گفت:

    سلام
    میتونم آموزش هاتون رو با ذکر منبع تو سایت خودم بزارم

  3. ناشناس گفت:

    این جلسه از آموزش آخرین جلسه css3 است؟
    بعد آیا آموزش php هم دارید؟

    • رضا طوماری گفت:

      سلام
      این آخرین جلسه CSS3 نیست ان شالله ادامه داره و قسمت های بعدی رو به زودی آپلود می کنیم .
      اگر این فیلم های آموزشی تموم بشن بعد از اینا آموزش php رو هم شروع خواهیم کرد .

    • ناشناس گفت:

      سلام
      ان شاالله هر چی از خدا بخواهید بهتون بده
      واقعا من هم html و همcss و هم css3 و c++ رو با سایت شما دنبال میکنم آموزش هاتون عالیه
      لطفا css3 رو هر چه زود تر کامل کنید و آموزش php رو هم شروع کنید

  4. ناشناس گفت:

    سلام
    ممنون از آموزش عالیتون
    آیا آموزش php هم تو سایت میگذارید؟

  5. قیمت طلا گفت:

    خیلی عالیه

  6. نقاشی ساختمان گفت:

    تو زمینه ای که فعالیت میکنید جزو بهترین سایت ها هستید

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