4.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a7367417b2b2512adf	CSS の @keyframes とアニメーションプロパティの仕組みを学ぶ	0	https://scrimba.com/c/cakprhv	301059	learn-how-the-css-keyframes-and-animation-properties-work

--description--

要素をアニメーションさせるには、アニメーションプロパティと @keyframes のルールについて知る必要があります。アニメーションプロパティはアニメーションがどのように振る舞うべきかを制御し、@keyframes ルールはそのアニメーション中に何が起こるかを制御します。アニメーションプロパティは全部で 8 つあります。このチャレンジではシンプルな内容にとどめ、最も重要な 2 つのプロパティを取り上げます。

animation-name はアニメーションの名前を設定します。この名前は後に続く @keyframes で、どのルールがどのアニメーションに適用されるかを CSS に伝えるために使われます。

animation-duration はアニメーションの時間の長さを設定します。

@keyframes はアニメーション内で時間の経過とともに何が起こるかを指定する方法です。これは、0% から 100% の範囲で表されるアニメーション中の特定の「フレーム」に対し、CSS プロパティを与えることによって行われます。これを映画で考えると、0％の CSS プロパティは要素がオーニングのシーンでどのように表示されるかにあたります。 100% の CSS プロパティは最後、エンドロールの直前に要素がどのように表示されるかです。そして、CSS は魔法のように要素を与えられた時間の長さを通して変化させ、シーンを再生します。以下は @keyframes とアニメーションプロパティの使い方を説明する例です:

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

anim という id を持つ要素に対し、上記のコードスニペットは animation-name を colorful に、animation-duration を 3 秒に設定します。次に、@keyframes のルールが colorful という名前のアニメーションプロパティにリンクされています。このルールでアニメーションの開始時点 (0%) での色は青に設定されており、終了時点 (100%) までに黄色に移り変わります。設定できるのは最初と最後の変化だけではなく、0% から 100% の任意のパーセンテージで要素のプロパティを設定できます。

--instructions--

rect という id をもつ要素に対し、animation-name を rainbow に、animation-duration を 4 秒に設定してアニメーションを作成しましょう。次に、@keyframes ルールを宣言します。アニメーション開始時点 (0%) の background-color は青、中間時点 (50%) では緑、終了時点 (100%) では黄色に設定してください。

--hints--

id が rect の要素には、値が rainbow の animation-name プロパティが必要です。

assert($('#rect').css('animation-name') == 'rainbow');

id が rect の要素には、値が 4s の animation-duration プロパティが必要です。

assert($('#rect').css('animation-duration') == '4s');

@keyframes ルールは rainbow という animation-name を使う必要があります。

assert(code.match(/@keyframes\s+?rainbow\s*?{/g));

rainbow に対する @keyframes ルールは、0% 時点で blue の background-color を使っている必要があります。

assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));

rainbow に対する @keyframes ルールは、50% 時点で green の background-color を使っている必要があります。

assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));

rainbow に対する @keyframes ルールは、100% 時点で yellow の background-color を使っている必要があります。

assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));

--seed--

--seed-contents--

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

  #rect {


  }




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

--solutions--

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

  #rect {
    animation-name: rainbow;
    animation-duration: 4s;
  }

  @keyframes rainbow {
    0% {
      background-color: blue;
    }
    50% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
  }
</style>
<div id="rect"></div>

4.9 KiB Raw Blame History Unescape Escape