cssblog.ir logo
P

transition-timing-function

تابع تنظیم زمان transition

برای تعیین گام ها و زمان‌بندی نحوه محاسبه و اعمال transition روی مشخصه‌ها از توابعی استفاده می‌شود که به آنها timing function گفته می‌شود

توابع زمان‌بندی بخشی از transition ها هستند و نقش آنان ارتباط دادن زمان اجرا (transition-duration) و میزان پیشرفت آن است.

تابع زمانبندی به زبان ساده

یک انیمیشن برخورد توپ با زمین و سپس بازگشت آن به هوا را فرض کنید. در دنیای واقعی مطمئنا سرعت توپ در زمانی که به سمت زمین حرکت می کند و به آن برخورد می کند و در زمان حرکت به سمت بالا یکسان نخواهد بود؛ چون اگر این چنین باشد، انیمیشن به شکلی مانند نمونه زیر اجرا خواهد شد و اصلا طبیعی نخواهد بود.

حال در مثال زیر تابع زمانبندی را تغییر دهید و با گرفتن موس روی صفحه به نحوه حرکت توپ دقت کنید: 

 توابع زمان‌بندی در CSS

در CSS به این توابع easing functions گفته می‌شود و برای تعریف آنها می توان از ۳ روش استفاده نمود که در ادامه به شرح هریک می پردازیم.

روش اول:‌ استفاده از کلمات کلیدی

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

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

برای برخی از مقادیر ممکن است نیاز باشد تا duration طولانی تعیین شود تا نحوه عملکرد آنها به خوبی مشاهده شود.

روش دوم: cubic-bézier

روش دیگر استفاده از تابع cubic-bezier می‌باشد. تمام کلمات کلیدی بیان شده در روش اول، با استفاده از تابع cubic-bezier قابل پیاده‌سازی هستند. برای مثال معادل ease-out را می‌توان با استفاده از این تابع، به شکل زیر تعریف نمود:

div {
    transition-timing-function: ease-out;
}
div {
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

* مثال از css-tricks نقل شده است

یا کلمه کلیدی step-start را می توان به این شکل تعریف نمود:

div {
    transition-timing-function: step-start;
}

div {
    transition-timing-function: steps(1, start);
}

* مثال از css-tricks نقل شده است

روش سوم: استفاده از تابع steps

یک روش دیگر برای تعیین timing-function استفاده از تابعی بنامsteps می باشد. روش کار این تابع به این شکل است که دو مقدار ورودی به آن داده می شود که ورودی اول (step) عدد صحیح مثبتی است که تعداد گام ها را مشخص می‌کند و ورودی دوم جهت (direction) نامیده می‌شود که دو مقدارstart وend را می تواند بپذیرد.

مقدار start و end

با وارد نمودن مقدار start در زمان شروع، انیمیشن در گام اول قرار دارد.  اما اگر برای همینtransition مقدارend را وارد کنیم، آخرین گام با پایانtransition رخ خواهد داد. لازم به ذکر است که تعیین نمودن این مقدار اختیاری است و در صورتیکه مقداری تعیین نشود بصورت پیشفرض جهت برابر باend خواهد بود.

در مثال زیر حالت‌های مختلفstart وend و همچنین تاثیر پارامتر اول (که یک عدد است) را مشاهده می کنید. برای مشاهده تفاوت ها موس را روی پنجره مثال بگیرید. 

 

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

پیشنهاد می شود که نگاهی به جدول پشتیبانی این مشخصه توسط مرورگرها داشته باشید و در صورت نیاز از vendor-prefix ها برای افزایش پشتیبانی از مرورگرها، استفاده کنید. مانند:

div {
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear;
}

اطلاعات بیشتر در وبسایت موزیلا

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند