按钮控制动画

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