---
id: 587d78a8367417b2b2512ae7
title: Change Animation Timing with Keywords
challengeType: 0
videoUrl: ''
localeTitle: تغيير الرسوم المتحركة التوقيت مع الكلمات الرئيسية
---
## Description
في الرسوم المتحركة في CSS ، تتحكم الخاصية animation-timing-function سرعة تغير عنصر متحرك خلال مدة الرسم المتحرك. إذا كانت الرسوم المتحركة عبارة عن سيارة تتحرك من النقطة A إلى النقطة B في وقت معين ( animation-duration ) ، فإن animation-timing-function توضح كيفية تسارع السيارة وتبطئها على مدار محرك الأقراص. هناك عدد من الكلمات الرئيسية المحددة مسبقًا المتاحة للخيارات الشائعة. على سبيل المثال ، القيمة الافتراضية هي ease ، والتي تبدأ بطيئة ، وتسرع في الوسط ، ثم تتباطأ مرة أخرى في النهاية. تتضمن الخيارات الأخرى ease-out ، وهو سريع في البداية ثم يبطئ ، ease-in ، وهو بطيء في البداية ، ثم يسرع في النهاية ، أو linear ، والذي يطبق سرعة حركة ثابتة طوال الوقت.
## Instructions
بالنسبة إلى العناصر ذات المعرف ball1 و ball2 ، أضف خاصية كل من animation-timing-function ، واضبط #ball1 على linear ، و #ball2 ease-out . لاحظ الفرق بين كيفية تحرك العناصر أثناء الرسم المتحرك ولكن معًا ، لأنهم يشتركون في نفس animation-duration تبلغ ثانيتين.
## Tests
```yml
tests:
- text: يجب أن تكون قيمة خاصية animation-timing-function العنصر مع معرف ball1 خطية.
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the animation-timing-function property for the element with the id ball1 should be linear.");'
- text: يجب أن تكون قيمة خاصية animation-timing-function للعنصر مع معرف ball2 سهلة التخفيف.
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function property for the element with the id ball2 should be ease-out.");'
```
## Challenge Seed
## Solution
```js
// solution required
```