CSS/animation

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