風鈴（ふうりん）進化過程
6段階の進化を設定し「風鈴を吊り下げる」までを実装しましたが、今回、一気に❷～❻の進化を織り込んでこの稿の終了といたします。
操作ボタンの設置
レコードプレイヤーなどにおいて、再生、停止、早送り、巻き戻し（今後、今流に早戻しを使う）ボタンがあります。風鈴を進化させるにあたり操作ボタンを設けました。操作は次の6段階に分けられます。
❶風鈴を吊り下げる
❷左右にゆらゆら揺れる
❸風鈴を鳴らす
❹短冊をひらひらと回転させる
❺鳴動と2つの揺れを停止
❻風鈴を取り外す
サンプル
夏の風物を象徴する海やひまわりの画像の下にボタンを利用して進化を促すメッセージから風鈴に関わるメッセージに変わります。
処理の概略
風鈴のように回転や揺れを伴う物を表現するにはCSS、ボタンを押す操作に連動する処理にはJavaScriptを利用すると効果的といわれています。
CSSは装飾やスタイルを定義します。動きのあるanimationを定義することもできますが、複雑な動きを制御するにはJavaScriptを使います。
風鈴を進化させるには初期状態を作り上げ、その後は下部に設置された操作ボタンの押下により進みます。風鈴の進化を制御する変数はnであり（0～5）の値を有します。JavaScriptのswitch/case文は制御変数の値によって様々な処理をすることができます。
各コード行には多くのコメント（//から行末まであるいは /*と*/に囲まれた内容）は処理の概要を記述するものです。適切なコメントは設計者の意志が込められています。
処理の肝
animationを起動させるには一般に、animation-play-stateを’paused’から’running’に変更して制御します。animationは左右への揺れとひらひら感を出すためにY軸の周りを回転するための２種類を使っています。
双方とも繰り返し回数(animation-iteration-cout)をinifinite(無限大)に設定して無限に繰り返しています。そして、揺れの開始で起動（animation-play-stateをrunningに）し、停止で（animation-play-stateをpaused）にしてアニメーションを止めていました。
この方法では問題が生じました。揺れを停止するには「鳴動と2つの揺れを停止」ボタンを押します。この方法は停止を逸早く停止させることができますが、風鈴や短冊が傾いたままで停止することがあり、見た目が良くありません。
今回はanimation-play-stateを’running’にかつ、animation-fill-modeを’forwards’に固定しanimation-iteration-countをinifiniteから0に設定してアニメーションの起動・停止を制御しています。
animation-fill-modeをforwardsに設定するとアニメーションが完了したときには、最後の状態に保つことができます。animation-fill-modeは「アニメーションが完了した時」でないと動作しないようです。
停止のタイミングは思ったほど遅くなく揺れや回転は正常完了状態に納まって問題ありません。
Result
下部に設置されたボタンを１回ずつ押下します。青色のボタンに黄色の刻印文字は次に処理される内容です。「短冊をひらひらと回転させる」を押下すると、風鈴が時計の振り子のように左右に揺れながら短冊が中央のY軸をを回転軸にしてひらひらと回転することを確認してください。
