CSS تبدیل

CSS تبدیل

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

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

CSS

در این فصل، شما به ویژگی‌های زیر یاد خواهید گرفت:

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

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

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

خصوصیات کروم IE افراط سافاری آپرا
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 که می‌خواهید به آن اثر بدهید
  • مدت زمان اثر

توجه داشته باشید که:اگر مدت زمان تعیین نشده باشد،过渡‌effکت مؤثر نخواهد بود زیرا مقدار پیش‌فرض 0 است.

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

مثال

div {
  عرض: 100px;
  ارتفاع: 100px;
  background: قرمز;
  transition: عرض 2s;
}

وقتی مقدار CSS (عرض) تغییر کند،过渡‌effکت شروع می‌شود.

حالا، بگذارید برای ویژگی عرض (width) یک مقدار جدید برای وقتی که موس بر روی عنصر <div> قرار دارد، تعیین کنیم:

مثال

div:hover {
  عرض: 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) - اجازه می‌دهد تا شما مقدار خود را در تابع کثیرگون تعریف کنید

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

مثال

آزمایش کنید

تأخیر گذار

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-delay تأخیر تبدیل را (به ثانیه) تعیین می‌کند.
transition-duration مدت زمان یا میکروثانیه‌ای که تبدیل باید ادامه یابد را تعیین می‌کند.
transition-property نام ویژگی‌های CSS که تبدیل باید به آنها اعمال شود را تعیین می‌کند.
transition-timing-function سرعت منحنی تبدیل را تعیین می‌کند.