CSS/transition

الخاصية transition في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات transition-property و transition-duration و transition-timing-function و transition-delay.

/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* تطبيق التأثير على خاصيتين */
transition: margin-right 4s, color 1s;

/* تطبيق تأثير الانتقال على جميع الخاصيات التي تغيّرت قيمها */
transition: all 0.5s ease-out;

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

تسمح لنا تأثيرات الانتقال بالتحويل بين حالتين من حالات العنصر مع حركة، ويمكن تفعيل حالات العنصر باستخدام الأصناف الزائفة (pseudo-classes) مثل ‎:hover و ‎:active أو بضبطها ديناميكيًا باستخدام JavaScript.

القيمة الابتدائية	لكل خاصية مختصرة: transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل خاصية مختصرة: transition-delay: كما حُدِّدَت. transition-duration: كما حُدِّدَت. transition-property: كما حُدِّدَت. transition-timing-function: كما حُدِّدَت.

أمثلة

مثال يوضح استخدام الخاصية transition لضبط تأثير الانتقال بمختلف خصائصه على خاصية CSS أو أكثر:

 <div class="grid">
  <div class="col">
    <div class="cell">
      <div class="t t1">transition: margin-right 4s;</div>
    </div>
    <div class="cell">
      <div class="t t2">transition: margin-right 4s 1s;</div>
    </div>
    <div class="cell">
      <div class="t t3">transition: margin-right 4s ease-in-out;</div>
    </div>
    <div class="cell">
      <div class="t t4">transition: margin-right 4s ease-in-out 1s;</div>
    </div>
    <div class="cell">
      <div class="t t5">transition: margin-right 4s, color 1s;</div>
    </div>
    <div class="cell">
      <div class="t t6">transition: all 0.5s ease-out;</div>
    </div>
  </div>
</div>

شيفرة CSS:

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
}

.t {
  background-color: #E4F0F5;
  color: #000;
  padding: .5rem;
  border-radius: .5rem;
  overflow: hidden;
  white-space: nowrap;
}

.grid:hover .t, .grid:active .t {
  background-color: #990099;
  color: #FFF;
  margin-right: 50%;
}

.t1 { transition: margin-right 4s; }
.t2 { transition: margin-right 4s 1s; }
.t3 { transition: margin-right 4s ease-in-out; }
.t4 { transition: margin-right 4s ease-in-out 1s; }
.t5 { transition: margin-right 4s, color 1s; }
.t6 { transition: all 0.5s ease-out; }

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

الميزة	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 قيمةً واحدةً أو أكثر من تأثيرات الانتقال لتطبيقها على العنصر، ويفصل بين تلك القيم بفاصلة.

كل قيمة من قيم هذه الخاصية تصف خصائص الانتقال الحركي، وتتضمن ما يلي:

• اسم الخاصية التي سيُطبَّق عليها التأثير، ويمكن أن تكون:
  • الكلمة المحجوزة none
  • الكلمة المحجوزة all
  • اسم إحدى خاصيات CSS القابلة للتحريك
• قيمة <timing-function> صفر مرة أو أكثر التي تصف دالة التوقيت المستخدمة مع الحركة.
• قيمة زمنية <time> صفر مرة أو مرة واحدة أو مرتين. وأوّل قيمة ستُفسَّر على أنها الوقت المسند للخاصية transition-duration، والقيمة الثانية ستُفسَّر على أنها الوقت المُسنَد للخاصية transition-delay.

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

transition: <single-transition>#;

حيث:

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

حيث:

<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

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

• مسودة CSS Transitions.