الخاصية animation

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية animation في CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات CSS المتعلقة بالحركات وهي 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> ]

 انظر أيضًا

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