---
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: ''
localeTitle: تعديل وضع التعبئة من الرسوم المتحركة
---
## Description
هذا رائع ، لكنه لا يعمل على الفور. لاحظ كيف تمت إعادة الرسوم المتحركة بعد مرور 500ms
ثانية ، مما يتسبب في عودة الزر إلى اللون الأصلي. تريد أن يظل الزر مظللاً. يمكن القيام بذلك عن طريق تعيين خاصية animation-fill-mode
إلى forwards
. يحدد animation-fill-mode
النمط المطبق على عنصر عندما ينتهي الرسم المتحرك. يمكنك تعيينه على النحو التالي: animation-fill-mode: forwards;
## Instructions
عيّن خاصية animation-fill-mode
button:hover
إلى forwards
حتى يظل الزر مظللاً عندما يمرر المستخدم فوقه.
## Tests
```yml
tests:
- text: 'button:hover
should have a animation-fill-mode
with a forwards
.'
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "button:hover
should have a animation-fill-mode
property with a value of forwards
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```