الفرق بين المراجعتين لصفحة: «CSS/transition-duration»

المراجعة الحالية بتاريخ 10:42، 9 سبتمبر 2018

الخاصية transition-duration في CSS تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية 0s لن تؤدي إلى حدوث تأثير انتقال أبدًا.

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

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

يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية transition-property، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية transition-property فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية transition-property فستهمل بعض قيم هذه الخاصية.

/* <time> قيم */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

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

أمثلة

مثال يوضح تأثير قيمة الخاصية transition-delay على تأخير تأثير الانتقال:

<div class="parent">
  <div class="box zero"><code>transition-duration: 0s;</code></div>
</div>

<div class="parent">
  <div class="box one"><code>transition-duration: 1000ms;</code></div>
</div>

<div class="parent">
  <div class="box two"><code>transition-duration: 2s;</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-timing-function: linear;
}

.box:hover {
  width: 110px;
  height: 50px;
  background-color: cadetblue;
  font-size: 10px;
  left: 100px;
  top: 100px;
  color: white;
}
    
.zero { transition-duration: 0s;}
.one { transition-duration: 1000ms; }
.two { transition-duration: 2s; }

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

الميزة	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-duration قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال.

`<time>`

الزمن الذي يجب أن يستغرقه تأثير الانتقال بين قيمة الخاصية القديمة وقيمة الخاصية الجديدة. والقيمة الافتراضية 0s لن تؤدي إلى حدوث تأثير انتقال أبدًا، أي سيكون الانتقال بين قيمتَي الخاصية آنيًا.

لا يُسمَح باستخدام القيم السالبة مع هذه الخاصية.

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

transition-duration: <time>#;

انظر أيضًا

صفحة الخاصية transition وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي transition-delay و transition-propertyو transition-timing-function.

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

مسودة CSS Transitions.

@@ سطر 2: / سطر 2: @@
 الخاصية <code>transition-duration</code> في CSS تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية <code>0s</code> لن تؤدي إلى حدوث تأثير انتقال أبدًا.
-يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية <code>[[CSS/transition-property|transition-property]]</code>، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية <code>[[CSS/transition-property|transition-property]]</code> فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية <code>[[CSS/transition-property|transition-property]]</code> فستهمل بعض قيم هذه الخاصية.<nowiki/><syntaxhighlight lang="css">
+== بطاقة الخاصية ==
-/* <time> قيم */
-transition-duration: 6s;
-transition-duration: 120ms;
-transition-duration: 1s, 15s;
-transition-duration: 10s, 30s, 230ms;
-/* القيم العامة */
-transition-duration: inherit;
-transition-duration: initial;
-transition-duration: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 31: / سطر 20: @@
 |كما حُدِّدَت.
 |}
+يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية <code>[[CSS/transition-property|transition-property]]</code>، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية <code>[[CSS/transition-property|transition-property]]</code> فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية <code>[[CSS/transition-property|transition-property]]</code> فستهمل بعض قيم هذه الخاصية.<nowiki/><syntaxhighlight lang="css">
+/* <time> قيم */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+/* القيم العامة */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 99: / سطر 101: @@
 تقبل الخاصية <code>transition-duration</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال.
-=== القيمة <code>[[CSS/time|<nowiki><time></nowiki>]]</code> ===
+=== <code>[[CSS/time|<nowiki><time></nowiki>]]</code> ===
 الزمن الذي يجب أن يستغرقه تأثير الانتقال بين قيمة الخاصية القديمة وقيمة الخاصية الجديدة. والقيمة الافتراضية <code>0s</code> لن تؤدي إلى حدوث تأثير انتقال أبدًا، أي سيكون الانتقال بين قيمتَي الخاصية آنيًا.
@@ سطر 109: / سطر 111: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/transition|transition]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/transition-delay|transition-delay]]</code> و <code>[[CSS/transition-property|transition-property]]</code>و <code>[[CSS/transition-timing-function|transition-timing-function]]</code>.
 == مصادر ومواصفات ==