More than 5 years have passed since last update.

CSSとプレーンJSだけで簡単なアニメーションの開始と停止を制御できる話

Posted at 2018-11-19

やりたかったこと

画面に時間指定で減っていくゲージを作りたかった。
（ゲームで出てくる時間制限のゲージみたいな）
実際調べるとクラスを与えたりだとか、jQuery使おうだとかいろいろある。

だけど、 単純な機能しか求めないんだから、単純なコードで書きたい。
とりあえずプレーンなJSでの書き方がわかれば、この記事を読まれた優秀な皆さんは簡単に応用できるだろうし。
~~そもそも基本的なことができてない自分こそ、いろいろ調べて実装方法に迷ったというのは内緒~~

他にいい方法があったら教えてください m(_ _)m

というほどでも有りませんが。

アニメーションさせたい要素にtransitionを設定したのが、今回の要です。
transitionを設定した要素のパラメータにJavaScriptで変更を加えることで、
設定された時間（今回は10秒）の間にゲージが減っていきます。