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

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

やりたかったこと

画面に時間指定で減っていくゲージを作りたかった。

（ゲームで出てくる時間制限のゲージみたいな）

実際調べるとクラスを与えたりだとか、jQuery使おうだとかいろいろある。

だけど、 単純な機能しか求めないんだから、単純なコードで書きたい。

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

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

デモとコード

See the Pen CSSとプレーンなJSでのタイマー表示 by Uichi60 (@uichi60) on CodePen.

解説

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

アニメーションさせたい要素にtransitionを設定したのが、今回の要です。

transitionを設定した要素のパラメータにJavaScriptで変更を加えることで、

設定された時間（今回は10秒）の間にゲージが減っていきます。

参考

【CSS3】Transition（変化）関連のまとめ