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