如何动态创建'@-Keyframe' CSS动画？

11 浏览
0 Comments

如何动态创建'@-Keyframe' CSS动画？

我有一个要求，需要旋转一个div并在特定位置停止（该值将从服务器接收到）。

我尝试使用原生JS来旋转和停止，但它会消耗我的CPU大量资源。

我可以使用CSS动画来旋转，但我需要创建一个类来动态描述动画停止的位置。类似于下面的代码：

@-webkit-keyframes spinIt {
    100% {
        -webkit-transform: rotate(一个动态值);
    }
}
@-moz-keyframes spinIt {
    100% {
        -webkit-transform: rotate(一个动态值);
    }
}

这里有一个参考链接

http://jsfiddle.net/bVkwH/8/

0