freeCodeCamp

6.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a7367417b2b2512adf	Learn How the CSS @keyframes and animation Properties Work	0		تعلم كيف تعمل CSSkeyframes وخصائص الرسوم المتحركة

Description

لتحريك عنصر ، تحتاج إلى معرفة خصائص الحركة وقاعدة @keyframes . تتحكم خصائص الرسم المتحرك في الكيفية التي ينبغي أن يتصرف بها @keyframes القاعدة @keyframes بما يحدث أثناء ذلك الرسم المتحرك. هناك ثمانية خصائص للرسوم المتحركة في المجموع. وهذا التحدي يبقيه بسيطة وتغطية اثنين من أهمها أولا: animation-name يحدد اسم للرسوم المتحركة، والذي يستخدم لاحقا من قبل @keyframes أن أقول CSS التي تسيطر على الذهاب مع والرسوم المتحركة. تحدد animation-duration الوقت للرسوم المتحركة. @keyframes هو كيفية تحديد ما يحدث بالضبط داخل الرسوم المتحركة على مدار المدة. يتم ذلك عن طريق إعطاء خصائص CSS "إطارات" محددة أثناء الرسوم المتحركة ، مع نسب تتراوح من 0٪ إلى 100٪. إذا قارنت هذا بفيلم ، فإن خصائص CSS لـ 0٪ هي كيفية عرض العنصر في المشهد الافتتاحي. تتمثل خصائص CSS بنسبة 100٪ في كيفية ظهور العنصر في النهاية قبل بدء القوائم مباشرةً. بعد ذلك ، يقوم CSS بتطبيق السحر على نقل العنصر خلال المدة المحددة للعمل على المشهد. في ما يلي مثال لتوضيح استخدام @keyframes وخصائص الرسم المتحرك:

#anim {
اسم الرسوم المتحركة: ملونة.
مدة الرسوم المتحركة: 3 ثوانٍ ؛
}
keyframes الملونة {
0٪
لون الخلفية: أزرق ؛
}
100٪ {
لون الخلفية: أصفر.
}
}

للعنصر مع anim الهوية، ورمز المقتطف أعلاه يحدد animation-name إلى colorful ويحدد animation-duration إلى 3 ثوان. ثم @keyframes القاعدة @keyframes بخصائص الرسم المتحرك بالاسم colorful . يضبط اللون على اللون الأزرق في بداية الرسم المتحرك (0٪) والذي سينتقل إلى اللون الأصفر بنهاية الصورة المتحركة (100٪). أنت لا تقتصر على الانتقالات في نهاية البداية فقط ، يمكنك تعيين خصائص للعنصر لأي نسبة تتراوح بين 0٪ و 100٪.

Instructions

أنشئ rect للعنصر الذي يحتوي على rect id ، من خلال تعيين animation-name على قوس قزح animation-duration إلى 4 ثوانٍ. بعد ذلك ، قم بالإعلان عن قاعدة @keyframes ، وقم بتعيين background-color في بداية الرسم المتحرك ( 0% ) إلى اللون الأزرق ، وسط الرسم المتحرك ( 50% ) إلى اللون الأخضر ، ونهاية الحركة ( 100% ) إلى الأصفر.

Tests

tests:
  - text: يجب أن يكون للعنصر ذو معرف <code>rect</code> خاصية <code>animation-name</code> ذات قيمة قوس قزح.
    testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
  - text: يجب أن يكون للعنصر ذي معرف <code>rect</code> خاصية <code>animation-duration</code> ذات قيمة 4 أضعاف.
    testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
  - text: يجب أن تستخدم قاعدة <code>@keyframes</code> <code>animation-name</code> لقوس قزح.
    testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
  - text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أزرق عند 0٪.
    testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
  - text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> خضراء بنسبة 50٪.
    testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
  - text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أصفر بنسبة 100٪.
    testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'

Challenge Seed

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {


  }




</style>
<div id="rect"></div>

Solution

// solution required

6.0 KiB Raw Blame History