CSS/transition-timing-function

الخاصية transition-timing-function في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) لتأثير الانتقال، لذا ستكون سرعة التأثير متفاوتة خلال مدته.

بطاقة الخاصية

القيمة الابتدائية	ease
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

يمكن تعريف منحني التسارع باستخدام دالة من دوال <timing-function> لكل خاصية يمكن تحريكها.

/* كلمات محجوزة */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* دوال */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* عدِّة دوال */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* القيم العامة */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

أمثلة

مثال عن استخدام مختلف قيم ودوال <timing-function> مع الخاصية transition-timing-function:

<div class="parent">
  <div class="box ease"><code>transition-timing-function: ease;</code></div>
</div>

<div class="parent">
  <div class="box ease-in"><code>transition-timing-function: ease-in;</code></div>
</div>

<div class="parent">
  <div class="box ease-out"><code>transition-timing-function: ease-out;</code></div>
</div>

<div class="parent">
  <div class="box ease-in-out"><code>transition-timing-function: ease-in-out;</code></div>
</div>

<div class="parent">
  <div class="box linear"><code>transition-timing-function: linear;</code></div>
</div>

<div class="parent">
  <div class="box step-start"><code>transition-timing-function: step-start;</code></div>
</div>

<div class="parent">
  <div class="box step-end"><code>transition-timing-function: step-end;</code></div>
</div>

<div class="parent">
  <div class="box steps"><code>transition-timing-function: steps(4, end);</code></div>
</div>

شيفرة CSS:

.parent { width: 250px; height:150px;}
.box {
  width: 220px;
  height: 100px;
  background-color: skyblue;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position:relative;
  transition-property: width, height, background-color, font-size, left, top, color;
  transition-delay: 0s;
  transition-duration: 2s;
  transition-timing-function: linear;
}

.box:hover {
  width: 110px;
  height: 50px;
  background-color: cadetblue;
  font-size: 10px;
  left: 100px;
  top: 100px;
  color: white;
}
    
.ease        { transition-timing-function: ease;}
.ease-in     { transition-timing-function: ease-in; }
.ease-out    { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out;}
.linear      { transition-timing-function: linear; }
.step-start  { transition-timing-function: step-start; }
.step-end    { transition-timing-function: step-end; }
.steps       { transition-timing-function: steps(4, end); }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0 (مع السابقة -webkit-) 26.0	4.0 (مع السابقة -moz-) 16.0	10	11.5 (مع السابقة -o-) 12.1	3.1 (مع السابقة -webkit-) 6.1

البنية العامة

تقبل الخاصية transition-timing-function قيمةً واحدةً أو أكثر تُحدِّد من نوع البيانات <timing-function>.

<timing-function>

كل <timing-function> تُمثِّل الدالة المرتبطة بالخاصية التي ستُخضع لتأثير الانتقال والمُعرَّفة في الخاصية transition-property.

البنية الرسمية

transition-timing-function: <single-transition-timing-function>#;

حيث:

<single-transition-timing-function> = <single-timing-function>

مصادر ومواصفات

• مسودة CSS Transitions.