English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يحدد خاصية animation-fill-mode في CSS3 كيفية تطبيق الأنماط على الهدف قبل وبعد تنفيذ التحريك.
الجدول التالي يلخص استخدامات هذا الصفة وأحداثياتها التاريخية.
| القيمة الافتراضية: | none |
|---|---|
| تطبيقها على: | جميع العناصر::before و::after مثلثات وهمية |
| الإرث: | لا يوجد |
| قابل للتأثير: | لايرجى الرجوع إلى صفات التحريك. |
| الإصدار: | ميزة جديدة في CSS3 |
| النحو في لغة JavaScript: | object.style.animationFillMode="forwards" |
جملة النحو للصفة هي:
animation-fill-mode: none | forwards | backwards | both | initial | inherit
السطر التالي يوضح كيفية استخدام خاصية animation-fill-mode.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-name: moveit;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}اختبار لمعرفة‹/›يصف الجدول أدناه قيم هذه الخاصية.
| القيم | الوصف |
|---|---|
| none | سيكون الفيديو بدون أي أنماط تطبق على الهدف قبل أو بعد تنفيذ الفيديو. |
| forwards | بعد انتهاء الفيديو (يحددهanimation-iteration-count)، سيتم تطبيق قيم الخصائص عند نهاية الفيديو. |
| backwards | سيطبق الفيديو القيم الخاصة بالخصائص المحددة في النقاط المفتوحة، والتي سيتم تحديدها من قبلanimation-delayالبداية الأولى للفيديو في مدة الوقت المحددة للخصائص، هذه هي القيم الخاصة بكائنات النقاط المفتوحة (animation-directionلـ normal أو alternate) أو القيم الخاصة بكائنات النقاط المفتوحة (animation-directionلـ reverse أو alternate-reverse). |
| both | سيتبع الفيديو القواعد الأمامية والخلفية، مما يوسع خصائص الفيديو في كلا الاتجاهين. |
| initial | ضبط هذه الخاصية إلى قيمتها الافتراضية. |
| inherit | إذا تم تحديدها، فإن العناصر المرتبطة تستخدم قيمة حساب الخاصية animation-fill-mode للعنصر الأب. |
متوافق مع متصفحات الـ animation-fill-mode، جميع المتصفحات الرئيسية تدعم هذه الخاصية.
|
يرجى الرجوع إلى الدروس التالية:حركة CSS3.
خصائص ولوائح مرتبطة: animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state,@keyframes.