【Vue.js】おそろしく速いキャベツ、オレでなきゃ見逃しちゃうね

【概要】

キャベツの画像をアニメーションで移動します。
トンパ、キルア、クロロの順にキャベツの移動速度が速くなります。

【環境】

Vue.js バージョン3.2.29

【コード】

・トンパ、キルア、クロロのキャベツ表示秒数の設定値は、特にこだわりはありません。
・トンパ、キルアまではキャベツが移動していることが目視できますが、クロロは目視できないと思います。

See the Pen syutou by nobu (@nobu12n) on CodePen.

【参考書】

これからはじめるVue.js 3実践入門

【参考サイト】

CSS animation を再実行させたい時は requestAnimationFrame してやる
CSS アニメーションのヒントとコツ