CSSアニメーション、
中間テスト。
〽️問１、基本構成。 〽️問２、ショートハンド。 〽️問３、開始を遅らせる。 〽️問４、時間関数。 〽️他問５、再生方向。 〽️問６、終了時の状態。 〽️お疲れ様でした。
CSSアニメーション、作り方。
⬆︎CSSアニメーションについてのまとめページはこちら。
こんにちは、「ふ」です。
「CSSアニメーション作り方」ではここまでプロパティとキーフレームについて、一通り学習してきました。
そこで今回は習得度を測るための「中間テスト」を行います。
〜ただ、普通のテストとは違います。
カンニングしてよし。
当テストは、書籍やwebを参考にしていただいて構いません。どんどんカンニングしてください。
webコーディングの学習では、全ての技法を暗記する必要は全くありません。
なぜなら、CSSひとつにとってもその内容は常に進化しており、寧ろ全暗記するのは正しい学習法とは言えません。
必要なのは「答えを引っ張って来れる能力」です。
問題が分からなかったら調べながら解いてください。それで解くことができれば、十分に力は付いていると言えます。
前置き長くなりましたが、始めていきましょう！
問１、基本構成。
当中間テストでは問１〜６まで用意しました。
先づはこちら⬇︎。
不透明度
問１
２秒かけて「テキストの不透明度が０になる」CSSアニメーションを作りましょう。繰り返しは無限とします。
解答例
#sample1 { animation:sample1 2s infinite; } @keyframes sample1 ｛ bb0% { opacity:1; } bb100% { opacity:0; } ｝
最小構成のCSSアニメーションの形です。
問２、ショートハンド。
第１問、できましたか？ ふふふ。
では次です。
これ⬇︎は、テキスト要素の文字色が変化するCSSアニメーションのコードです。
#sample2 { color:blue; animation-name:sample2; animation-delay:1s; animation-iteration-count:2; animation-duration:2s; } @keyframes sample2 ｛ bb0% { color:blue; } bb100% { color:red; } ｝
問２
できる限りコードを短縮してください。
解答例
#sample2 { color:blue; animation:sample2 2s 1s 2; } @keyframes sample2 ｛ bbto { color:red; } bb｝
① CSSアニメーションに関するプロパティは、animationプロパティで一括指定にまとめることができます。
② その際、animation-durationとanimation-delayの値形式は同じであるため、記述順にはルールがあります。durationの値を先に、delayの値を後に書くようにしましょう。
③ キーフレームにおいて0%の状態「color:blue」は規定値（アニメーションを指定する前の状態）と同じなので省略することができます。
問３、開始を遅らせる。
１
2
要素１と要素２。margin-leftの値を変えることで、左から右へと移動するCSSアニメーションを施しています。
現在、１も２も同時にスタートしていますが..
#elm1 { animation:sample3 3s infinite; } #elm2 { animation:sample3 3s infinite; } @keyframes sample3 ｛ bbfrom { margin-left:10%; } to { margin-left:80%; }
１
２
問３
要素２だけにプロパティを１つ追加して、開始を0.5秒遅らせてください。
解答例
#elm2 { animation:sample3 3s 「「１0.5s」」 infinite; }
animation-delayプロパティの値を追加します。
問４、時間関数。
<div id = "sample4"></div>
div領域に背景色を付け、widthを変化させることで「タイマー」のようなものを表現します。
アニメーションをよく見ると、始まりのところで急激に進行しているのがわかります。
「タイマー」なのでwidthを平均的に大きくしていきたいのですが、
CSSアニメーションのデフォルトの状態では、このように変化量が一定にはなりません。
問４
平均的にwidthが大きくなっていくCSSアニメーションを作ってください。
解答例
#sample4 { background-color:crimson; width:0%; height:0.5em; animation:sample4 4s 「「１linear」」 infinite; } @keyframes sample4 ｛ bbto { width:80%; } bb｝
進捗を平均的にするには、animation-timing-functionの値を「linear」と指定します。
問５、再生方向。
白黒
これは、文字色が「0% : 黒、100% : 白」となるCSSアニメーションです。
一方通行で再生を繰り返しているので、白になりきった瞬間（100%）に黒（0%）に戻ってしまい、点滅しているように見えてしまいます。
白黒
本当はこの⬆︎ように滑らかに変化させたい。
問５
colorが、黒→白→黒→白..と滑らかに変化するアニメーションにしてください。
解答例
#sample5 { animation:sample5 2s 「「１alternate」」 infinite; } @keyframes sample5 ｛ bbfrom { color:#000; } bbto { color:#fff; } ｝
animation-directionの値を「alternate」とすることで、再生方向が順方向→逆方向を繰り返すように成増。
したがって切れ目のないスムーズな往復アニメーションを実装できます。
問６、終了時の状態。
１度だけ実行させるアニメーションです。プレビューするには「play」ボタンを押してください。
border-radiusを変化させて正方形から円形に変化させているのですが、アニメーション終了後には最初の正方形にもどってしまいます。
問６
CSSアニメーション終了後もキーフレーム100%の状態（円形）を保持するようにしてください。
解答例
#sample6 { width:8em; height:8em; margin:0 auto; border:solid 9px blue; border-radius:0; animation:sample6 2s 「「１forwards」」; } @keyframes sample6 ｛ bbto { border-radius:50%; bb} bb｝
アニメーションの終了状態を保持するには、animation-fill-modeの値を「forwards」に指定しましょう。最後に採用されたキーフレームの状態を維持することができます。
ロリポップ！の取次店になりました。
お疲れ様でした。
全６問にわたる中間テスト、お疲れ様でした！
各セクションに設けてある「回答例」はほんの一例です。プロパティやキーフレームを工夫することで、色々な表現方法があるかと思います。
web検索や書籍を参考に答えを導き出せた方、合格！
おめでとうございます。
基本をマスターしたら、あとはアイデアを絞り出してCSSアニメーションを楽しんでください！
最後までお読みくださり、ありがとうございます。
「CSSアニメーション作り方」。第２部も準備に取り掛かっているので楽しみにしていてください。ではまた〜 ♪♪
HTML 
CSS:決まった位置にスナップさせるスクロール。
SVGアニメーション、作り方。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。