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

المراجعة الحالية بتاريخ 12:12، 8 أكتوبر 2019

الخاصية animation في CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات CSS المتعلقة بالحركات وهي animation-name و animation-duration و animation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode و animation-play-state.

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

القيمة الابتدائية	لكل خاصية مختصرة: `animation-name`: `none` `animation-duration`: `0s` `animation-timing-function`: `ease` `animation-delay`: `0s` `animation-iteration-count`: `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state`: `running`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل خاصية مختصرة: `animation-name`: كما حُدِّدَت. `animation-duration`: كما حُدِّدَت. `animation-timing-function`: كما حُدِّدَت. `animation-delay`: كما حُدِّدَت. `animation-iteration-count`: كما حُدِّدَت. `animation-direction`: كما حُدِّدَت. `animation-fill-mode`: كما حُدِّدَت. `animation-play-state`: كما حُدِّدَت.

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

أمثلة

يمكنك أن تلاحظ طريقة استخدام الخاصية animation في المثال الآتي:

<div class="view_port">
  <div class="polling_message">
     الاستماع للرسائل
  </div>
  <div class="cylon_eye"></div>
</div>

شيفرة CSS:

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة `-webkit-`) 43.0	5.0 (مع السابقة `-moz-`) 16.0	10	15.0 (مع السابقة `-webkit-`) 30.0	5.1 (مع السابقة `-webkit-`) 9.0

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

تقبل الخاصية animation قيمة <single-animation> واحدة أو أكثر ويُفصَل بينها بفاصلة.

كل قيمة تتألف مما يلي:

صفر مرة أو أكثر من القيم الآتية:
- <timing-function>
- <animation-iteration-count>: وهي تُمثِّل عدد مرات تكرار الحركة، انظر صفحة الخاصية animation-iteration-count للتفاصيل.
- <animation-direction>: وهي تمثل اتجاه الحركة، انظر صفحة الخاصية animation-direction للتفاصيل.
- <animation-fill-mode>: تصف كيف يجب تطبيق الأنماط على العنصر الخاضع للحركة، انظر صفحة الخاصية animation-fill-mode للتفاصيل.
- <animation-play-state>: تحدد إذا كان العنصر خاضعًا للحركة الآن أم كانت الحركة متوقفةً مؤقتًا، انظر صفحة الخاصية animation-play-state للتفاصيل.
اسم اختياري للحركة، والذي يمكن أن يكون الكلمة المحجوزة none أو نوع البيانات <custom-ident> أو سلسلةً نصيةً <string>.
مدة زمنية <time> صفر مرة أو مرة واحدة أو مرتين، وأوّل قيمة ستُسنَد إلى الخاصية animation-duration والقيمة الثانية ستُسنَد إلى animation-delay.

لاحظ أنَّ ترتيب القيم مهم لتمييز الخاصية animation-name عمّا سواها.

يُعد ترتيب القيم داخل كل تأثير animation أمرًا مهمًا حيث يتم تعيين القيمة الأولى لتمثل زمن التأثير animation، بينما يتم تعيين القيمة الثانية لتمثل زمن تأخير انطلاق التأثير.

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

animation: <single-animation>#;

حيث:

<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

انظر أيضًا

صفحة الخاصيات الفرعية التي تضبطها الخاصية animation وهي animation-name و animation-duration و animation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode و animation-play-state.
الكشف عن دعم المتصفحات لحركات CSS
استخدام حركات CSS
حركات CSS: نصائح وحيل

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

مسودة CSS Animations.

@@ سطر 123: / سطر 123: @@
 * مدة زمنية <code>[[CSS/time|<nowiki><time></nowiki>]]</code> صفر مرة أو مرة واحدة أو مرتين، وأوّل قيمة ستُسنَد إلى الخاصية <code>[[CSS/animation-duration|animation-duration]]</code> والقيمة الثانية ستُسنَد إلى <code>[[CSS/animation-delay|animation-delay]]</code>.
 لاحظ أنَّ ترتيب القيم مهم لتمييز  الخاصية <code>[[CSS/animation-name|animation-name]]</code> عمّا سواها.
+يُعد ترتيب القيم داخل كل تأثير <code>animation</code> أمرًا مهمًا حيث يتم تعيين القيمة الأولى لتمثل زمن التأثير <code>animation</code>، بينما يتم تعيين القيمة الثانية لتمثل زمن تأخير انطلاق التأثير.
 === البنية الرسمية ===
@@ سطر 134: / سطر 136: @@
 ==  انظر أيضًا ==
 * صفحة الخاصيات الفرعية التي تضبطها الخاصية <code>animation</code> وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</code> و <code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> و <code>[[CSS/animation-play-state|animation-play-state]]</code>.
+* [[CSS/detecting CSS animation support|الكشف عن دعم المتصفحات لحركات CSS]]
+* [[CSS/using CSS animations|استخدام حركات CSS]]
+* [[CSS/CSS animations tips|حركات CSS: نصائح وحيل]]
 == مصادر ومواصفات ==