Animation Basics

アニメーションこそ、ゲームやウェブサイトを生き生きとさせるものです。ホバーで光るボタン、回るコイン、跳ねるボール、画面を滑っていくキャラクター——どれもアニメーションで、そのすべてを自分で作れます。

このチュートリアルでは、Vibe Coding Academyのアバターが、コピペできる本物のコードを使って案内します。まずはシンプルなホバー効果から始め、@keyframesのループアニメーションへレベルアップし、それからJavaScriptで動きをフレームごとに操ります——本物のゲームが使うのと同じ技です。どのコードもあなたのもの。貼って、動かして、いじってみましょう。

終わるころには、アニメーションするボタン、跳ねるボール、回るコイン、矢印キーで動かせるスプライトが手に入ります——さらに、いつでももっと生成できるAIプロンプトも。