[ペチパーの大冒険] ゲーム制作#30「CSS 間違い探しクイズ（中級編3 : アニメーション）」

CSSをコーディングしていると、意図しない表示がされてそれを調べるためにたくさんの時間を費やしてしまう事がたまにあります。 慣れていて技術を熟知していてもそれだけ時間がかかると言うことは、初学者の人はもっと膨大ないな時間を費やしてしまうに違いない。 そうか、そんな時間を楽しめるようなゲームを作れば良いんだ！ という趣旨のゲーム作りシミュレーションブログです。 今回もCSSの間違い探しクイズをお楽しみください。

Q1. アニメーションが動かない？

[html] <div class="box"></div> [css] .box { width: 100px; height: 100px; background-color: red; animation-name: moveBox; animation-duration: 2s; } @keyframes movebox { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }

Q. 上記の .box はアニメーションしません。原因はどれ？

1. animation-duration が短すぎる
2. transform の使い方が間違っている
3. @keyframes の名前が間違っている
4. <div> に position が指定されていない

正解

正解を見る。[クリック]

Q2. アニメーションが1回しか動かない？

[css] .ball { animation-name: bounce; animation-duration: 1s; }

Q. このアニメーションを常に繰り返し続けたい場合は、どうすればいい？

1. animation: bounce 1s ease-in; にすればよい
2. animation-timing-function: infinite; をつける
3. animation-iteration-count: infinite; を追加する
4. animation-direction: alternate; にすればよい

正解

正解を見る。[クリック]

Q3. アニメーションの途中でカクつく？

[css] .spinner { animation: rotate 2s linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Q. このスピナーをスムーズに常時回転させたい。どうすればよい？

1. animation-delay: 0s; をつける
2. animation-fill-mode: both; を追加する
3. animation-direction: reverse; にする
4. animation-iteration-count: infinite; を追加する

正解

正解を見る。[クリック]

Q4. 終了後に元の状態に戻ってしまう？

[css] .text { animation: fadeIn 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Q. アニメーション終了後もopacity: 1 のままにしたい。どうする？

1. animation-iteration-count: 1; をつける
2. animation-fill-mode: forwards; をつける
3. opacity: 1; を別で書いておく
4. animation-delay: 0s; を設定する

正解

正解を見る。[クリック]

あとがき

CSSアニメーションは、Webページで強力なインターフェイスの武器になります。 上手く使いこなすと、ビックリするような表現ができてしまいます。 アイデア次第で、かなりの表現が可能になってくるぐらい最近のバージョンは使いやすくもなっていますが、 CSSがプログラミングチックになって、戸惑っているコーダーさんも増え始めているという話も耳に入ります。 思った通りに使えるようになると、楽しさも倍増するんですよね。