JavaScriptを使い、CSS3を使ったanimationの内容を変える方法 - Qiita

はじめに CSSでは、 ainmation プロパティと keyframes を使ってアニメーションができます。 1つのオブジェクトに対して1つのアニメーション設定をするだけなら、それほど難しいことはありません。 しかし、ボタンの入力内容などに応じてアニメーション内容を切り替えたいという事もあります。 このページでは JavaScriptを使い、CSSのアニメーションを切り替える方法を書いてみました。 まずは1回だけのCSSアニメーション まずは、ボタンが押されたらアニメーションを1回だけおこなうサンプルを作ってみます。 ここでは、div要素の中にあるspanで作った赤色の箱(id="box")を、transform:translateX で横移動をさせてみます。 <div class="parent"> <span class="child" id="box"></span> </div