freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a8367417b2b2512ae7	Change Animation Timing with Keywords	0		تغيير الرسوم المتحركة التوقيت مع الكلمات الرئيسية

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

tests:
  - text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> العنصر مع معرف <code>ball1</code> خطية.
    testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
  - text: يجب أن تكون قيمة خاصية <code>animation-timing-function</code> للعنصر مع معرف <code>ball2</code> سهلة التخفيف.
    testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'

Challenge Seed

<style>

  .balls {
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left:27%;

  }
  #ball2 {
    left:56%;

  }

@keyframes bounce {
  0% {
    top: 0px;
  }
  100% {
    top: 249px;
  }
}

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

Solution

// solution required

3.4 KiB Raw Blame History