按钮控制动画

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（或您正在使用的元素）添加一个类。然后将animation属性添加到具有该类的选择器，例如：

 .spin-baby-spin { 

   animation: spin 2s linear infinite;
}