Files

camperbot 5c868af2b8 chore(i18n,learn): processed translations (#44851 )

2022-01-20 20:30:18 +01:00

3.5 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a8367417b2b2512ae7	キーワードでアニメーションのタイミングを変更する	0	https://scrimba.com/c/cJKvwCM	301045	change-animation-timing-with-keywords

--description--

CSS アニメーションでは、animation-timing-function プロパティにより、アニメーション要素がアニメーションの継続時間中に変化する速度を制御します。車が A 地点から B 地点へ与えられた時間 (animation-duration の値) で移動するアニメーションであれば、animation-timing-function は車がドライブの過程でどのように加減速するかを示します。

よく使われるオプションに対しては、あらかじめ定義されたキーワードがいくつか用意されています。たとえば、デフォルト値は ease で、これは最初はゆっくりスタートし、途中でスピードを上げ、最終的に再び減速します。他のオプションとしては、速く始まって減速する ease-out、遅く始まって最終的に加速する ease-in、全体を通じて一定速度のアニメーションが適用される linear が含まれます。

--instructions--

id ball1 と ball2 の要素に対してそれぞれ animation-timing-function プロパティを追加し、#ball1 に対しては linear を、#ball2 に対しては ease-out を設定します。アニメーション中の要素の動き方の違いに注目してください。animation-duration 2 秒の設定は共通しているため、アニメーションは同じタイミングで終了します。

--hints--

id ball1 要素の animation-timing-function プロパティの値は linear でなければなりません。

const ball1Animation = __helpers.removeWhiteSpace(
  $('#ball1').css('animation-timing-function')
);
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');

id ball2 要素の animation-timing-function プロパティの値は ease-out でなければなりません。

const ball2Animation = __helpers.removeWhiteSpace(
  $('#ball2').css('animation-timing-function')
);
assert(
  ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);

--seed--

--seed-contents--

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

--solutions--

<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%;
    animation-timing-function: linear;
  }
  #ball2 {
    left:56%;
    animation-timing-function: ease-out;
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

3.5 KiB Raw Permalink Blame History