الفرق بين المراجعتين ل"CSS/transition-timing-function"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 148: | سطر 148: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-transitions/#transition-timing-function-property CSS Transitions]. | * مسودة [https://drafts.csswg.org/css-transitions/#transition-timing-function-property CSS Transitions]. | ||
− | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
− | [[تصنيف:CSS Transitions]] | + | [[تصنيف:CSS Transitions|{{SUBPAGENAME}}]] |
مراجعة 15:42، 28 يناير 2018
الخاصية transition-timing-function
في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) لتأثير الانتقال، لذا ستكون سرعة التأثير متفاوتة خلال مدته.
يمكن تعريف منحني التسارع باستخدام دالة من دوال <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;
القيمة الابتدائية | ease
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
مثال عن استخدام مختلف قيم ودوال <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.