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

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