آموزش انتقال CSS

انتقال CSS

انتقال های CSS به شما امکان می دهد مقادیر ویژگی را به طور هموار و در مدت زمان مشخص تغییر دهید.

برای دیدن جلوه انتقال CSS روی عنصر زیر قرار دهید:

در این فصل شما با خواص زیر آشنا خواهید شد:

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

پشتیبانی مرورگر برای انتقال

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از ویژگی پشتیبانی می کند.

چگونه از CSS Transitions استفاده کنیم؟

برای ایجاد یک اثر گذار ، باید دو مورد را مشخص کنید:

• ویژگی CSS که می خواهید به آن افکت اضافه کنید
• مدت زمان اثر

توجه: اگر قسمت مدت زمان مشخص نباشد ، انتقال هیچ تاثیری نخواهد داشت ، زیرا مقدار پیش فرض 0 است.

مثال زیر یک عنصر 100px * 100px قرمز <div> را نشان می دهد. عنصر <div> همچنین برای مدت زمان 2 ثانیه یک اثر انتقال برای ویژگی عرض تعیین کرده است:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div {
  transition-delay: 1s;
}

div {
  transition: width 2s, height 2s, transform 2s;
}

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div {
  transition: width 2s linear 1s;
}