Css 按钮控制动画

好的，我有一个项目，我正在制作一个卡通版本的唱片播放器。我希望侧边的播放按钮使用webkit切换录制旋转的动画，同时启动音频曲目。音轨很好，但现在肯定会通过按钮影响webkit。最好的方法是什么？我宁愿避免使用JQuery

---

任何方向正确的点头都会很好。

你可以通过CSS转换和CSS动画实现你想要的。下面的演示演示如何进行旋转：

现在你有东西在旋转，你只需要触发它。最好的方法是在单击按钮时向

div

（或您正在使用的元素）添加一个类。然后将动画特性添加到该类的选择器中，例如：

 .spin-baby-spin { 

   animation: spin 2s linear infinite;
}

---

您好，本教程可能对您有所帮助。我不确定您关于使用或影响WebKit的意思是什么？它只是Safari目前使用的一个渲染引擎，Chrome放弃了它，转而使用了一个名为Blink的fork。你是说你想用CSS来制作唱片的动画吗？@dstorey是的，简言之，谢谢，但我无法让它工作。我做错了什么？有很多问题。请参阅以获得解决方案。首先，您没有将前缀包含在旋转婴儿旋转规则中。其次，您将类添加到按钮。它需要添加到将旋转的div中。但只有在点击按钮之后。要做到这一点，您需要在单击按钮时通过JS添加类。在演示中，我使用了classList.toggle，但是它没有很好的浏览器支持，所以请使用您最喜欢的方法添加和删除类。很抱歉，延迟了，我误解了您之前的意思。非常感谢。我要去看一场关于你的戏剧！

 .spin-baby-spin { 

   animation: spin 2s linear infinite;
}