按鈕控制動畫

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; 
}