过渡 CSS

过渡 CSS

CSS انتقال به شما اجازه می‌دهد تا در مدت زمان مشخص شده، مقدار خاصیت را به آرامی تغییر دهید.

لطفاً موس خود را روی این عنصر ببرید تا تأثیر انتقالی CSS را مشاهده کنید:

CSS

در این فصل، شما خواهید آموخت که:

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

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

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

ویژگی Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

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

برای ایجاد تأثیر انتقالی، باید دو چیز را مشخص کنید:

  • خصوصیت CSS که می‌خواهید تأثیر به آن اضافه کنید
  • مدت زمان تأثیر

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

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

مثال

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

وقتی مقدار خاصیت CSS (width) تغییر کند، انتقال آغاز می‌شود.

حالا، اجازه دهید که برای خاصیت width یک مقدار جدید برای زمانی که موس بر روی عنصر <div> قرار دارد، تعیین کنیم:

مثال

div:hover {
  width: 300px;
}

آزمایش کنید

لطفاً توجه کنید که وقتی نوسان‌گر از عنصر به بیرون می‌رود، به تدریج به حالت اولیه خود برمی‌گردد.

تغییر چندین مقدار ویژگی

در مثال زیر به ویژگی‌های width و height اثر انتقال اضافه شده است، width 2 ثانیه و height 4 ثانیه است:

مثال

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

آزمایش کنید

تعیین منحنی سرعت انتقال

transition-timing-function ویژگی مشخص می‌کند که منحنی سرعت انتقال چیست.

ویژگی transition-timing-function می‌تواند مقادیر زیر را پذیرا باشد:

  • ease - تعیین می‌کند که انتقال به آرامی شروع شود، سپس شتاب گیرد و در نهایت به آرامی پایان یابد (پیش‌فرض)
  • linear - تعیین می‌کند که سرعت انتقال از آغاز تا پایان یکسان باشد
  • ease-in - تعیین می‌کند که انتقال به آرامی آغاز شود
  • ease-out - تعیین می‌کند که انتقال به آرامی پایان یابد
  • ease-in-out - تعیین می‌کند که انتقال آغاز و پایان کند
  • cubic-bezier(n,n,n,n) - اجازه می‌دهد تا شما مقدار خود را در تابع بیسئ‌بیسر تعریف کنید

در مثال‌های زیر نمونه‌هایی از منحنی‌های سرعت مختلف قابل استفاده آورده شده است:

مثال

#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;}

آزمایش کنید

تأخیر در انتقال

transition-delay ویژگی تأخیر اثر انتقال را مشخص می‌کند (به ثانیه).

در مثال زیر 1 ثانیه تأخیر قبل از شروع وجود دارد:

مثال

div {
  transition-delay: 1s;
}

آزمایش کنید

تغییر + تبدیل

در مثال زیر به تبدیل اثر انتقال اضافه شده است:

مثال

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

آزمایش کنید

مثال‌های بیشتری از انتقال

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

مثال

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

آزمایش کنید

یا از نوشتار کوتاه استفاده کنید transition ویژگی‌ها:

مثال

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

آزمایش کنید

ویژگی‌های انتقال CSS

در جدول زیر تمام ویژگی‌های انتقال CSS لیست شده‌اند:

ویژگی توضیح
transition ویژگی خلاصه شده، برای تنظیم چهار ویژگی transition به یک ویژگی استفاده می‌شود.
transition-delay تأخیر اثر گذاری transition را مشخص می‌کند.
transition-duration مدت زمان یا میکروثانیه‌ای که transition باید ادامه یابد را مشخص می‌کند.
transition-property نام ویژگی‌های CSS که اثر گذاری transition را هدف قرار می‌دهد را مشخص می‌کند.
transition-timing-function سرعت منحنی اثر گذاری过渡 را مشخص می‌کند.