137 lines
4.9 KiB
Markdown
137 lines
4.9 KiB
Markdown
---
|
||
id: 587d78a7367417b2b2512adf
|
||
title: CSS の @keyframes とアニメーションプロパティの仕組みを学ぶ
|
||
challengeType: 0
|
||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||
forumTopicId: 301059
|
||
dashedName: 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` とアニメーションプロパティの使い方を説明する例です:
|
||
|
||
```css
|
||
#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` プロパティが必要です。
|
||
|
||
```js
|
||
assert($('#rect').css('animation-name') == 'rainbow');
|
||
```
|
||
|
||
id が `rect` の要素には、値が 4s の `animation-duration` プロパティが必要です。
|
||
|
||
```js
|
||
assert($('#rect').css('animation-duration') == '4s');
|
||
```
|
||
|
||
`@keyframes` ルールは `rainbow` という `animation-name` を使う必要があります。
|
||
|
||
```js
|
||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||
```
|
||
|
||
`rainbow` に対する `@keyframes` ルールは、0% 時点で `blue` の `background-color` を使っている必要があります。
|
||
|
||
```js
|
||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||
```
|
||
|
||
`rainbow` に対する `@keyframes` ルールは、50% 時点で `green` の `background-color` を使っている必要があります。
|
||
|
||
```js
|
||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||
```
|
||
|
||
rainbow に対する `@keyframes` ルールは、100% 時点で `yellow` の `background-color` を使っている必要があります。
|
||
|
||
```js
|
||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<style>
|
||
div {
|
||
height: 40px;
|
||
width: 70%;
|
||
background: black;
|
||
margin: 50px auto;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
#rect {
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
</style>
|
||
<div id="rect"></div>
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```html
|
||
<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>
|
||
```
|