الخاصية animation
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية 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> ]
انظر أيضًا
- صفحة الخاصيات الفرعية التي تضبطها الخاصية
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.