js修改keyframes动画样式

需求：div块绕着屏幕周围走，要求div的行走范围跟随窗口大小的变化。

首先：

然而效果似这样色儿滴：

想要加上自适应效果好像并不容易：

只能试试js：

var dynamicValue = "33.3"

var  = "@-webkit-keyframes run{0% {transform:translateX(0%)-webkit-transform:translateX(0%)}\n"+

      "100%{transform:translateX("+ dynamicValue + "%)-webkit-transform:translateX("+ dynamicValue +"%)}}"

var style = document.createElement('style')

style.type = 'text/css'

style.innerHTML = ''

document.getElementsByTagName('head')[0].appendChild(style)

this.stylesheet = document.styleSheets[document.styleSheets.length-1]

try {

    this.stylesheet.insertRule( rule , this.stylesheet.rules.length)

} catch (e) {

}

CSS3动画以百分比表示关健帧，你可以随意从0％－100％自己定义每个关健帧的动作。0％就是开始，100％就是结束。

@-webkit-keyframes anime {

0%{把样式写这里}

50%{把样式写这里}

100%{把样式写这里}

}

---