الخاصية transition-timing-function

من موسوعة حسوب
< CSS
نسخة 10:45، 9 سبتمبر 2018 للمستخدم Riyad-khalifeh (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى: تصفح، ابحث

الخاصية 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>

انظر أيضًا

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