css - アニメーションを制御するボタン

Question

わかりましたので、私はレコード プレーヤーの漫画バージョンを作成しているプロジェクトを持っています。側面の再生ボタンで、webkit を使用してレコードが回転するアニメーションを切り替え、同時にオーディオ トラックを開始します。オーディオ トラックは問題ありませんが、ボタンから Webkit に影響を与えることは確実です。これを行う最善の方法は何ですか？私はむしろJQueryを避けたいです。

正しい方向へのうなずきは素晴らしいでしょう。

Answer 1

CSS 変換と CSS アニメーションを使用して、目的を達成できます。次のデモは、スピンの実行方法を示しています。

http://jsfiddle.net/FSkKn/

div { 
   /* add -webkit, moz, and o prefixes to the property below */
   /* change 2s to the time you want for one revolution */
   animation: spin 2s linear infinite;
}


@keyframes spin {
    /* both the keyframe above and the transform properties below need prefixes */

    from {
        transform:rotate(0deg) ;
    }

    to {
        transform:rotate(360deg);
    }
}

これで回転するものができたので、あとはそれをトリガーするだけです。最良の方法はdiv、ボタンがクリックされたときに (または使用している要素) にクラスを追加することです。次に、次のように、アニメーション プロパティをそのクラスのセレクターに追加します。

 .spin-baby-spin { 

   animation: spin 2s linear infinite;
}