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