---
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
```