الخاصية 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">
    Listening for dispatches
  </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: <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> ]

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

• مسودة CSS Animations.