以编程方式更改animation规则中的webkit转换值
我有这个样式表：
@-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,1620px,0px); } } 不是我想修改1620px的值取决于一些参数。 喜欢这个：
@-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px, height*i, 0px); } }
我宁愿能够使用JavaScript和jQuery，虽然一个纯CSS的解决scheme可以。
这是一个运行在它的移动Safari浏览器的iPhone游戏。
使用CSSOM
var style = document.documentElement.appendChild(document.createElement("style")), rule = " run {\ 0% {\ -webkit-transform: translate3d(0, 0, 0); }\ transform: translate3d(0, 0, 0); }\ }\ 100% {\ -webkit-transform: translate3d(0, " + your_value_here + "px, 0);\ transform: translate3d(0, " + your_value_here + "px, 0);\ }\ }"; if (CSSRule.KEYFRAMES_RULE) { // W3C style.sheet.insertRule("@keyframes" + rule, 0); } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit style.sheet.insertRule("@-webkit-keyframes" + rule, 0); }
如果您想修改已包含的样式表中的关键帧规则，请执行以下操作：
var stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify , rules = stylesheet.rules , i = rules.length , keyframes , keyframe ; while (i--) { keyframes = rules.item(i); if ( ( keyframes.type === keyframes.KEYFRAMES_RULE || keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ) && keyframes.name === "run" ) { rules = keyframes.cssRules; i = rules.length; while (i--) { keyframe = rules.item(i); if ( ( keyframe.type === keyframe.KEYFRAME_RULE || keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ) && keyframe.keyText === "100%" ) { keyframe.style.webkitTransform = keyframe.style.transform = "translate3d(0, " + your_value_here + "px, 0)"; break; } } break; } }
如果您不知道顺序，但知道CSS文件的URL，请用document.querySelector("link[href=' your-css-url.css ']").sheetreplacedocument.styleSheets[0] 。
你有没有尝试过在你的HTML文档头部的<style>元素中声明你的CSS的关键帧部分。 然后你可以给这个元素一个id或者任何东西，随时用javaScript来改变它的内容。 像这样的东西：
<style id="keyframes"> @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px, 1620px, 0px); } } </style>
然后你的jQuery可以改变这一切正常：
$('#keyframes').text('whatever new values you want in here');
那么从你的例子看来，CSSanimation可能是矫枉过正的。 改用转换：
-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */
然后通过js对元素应用一个新的变换：
$("<yournode>")[0].webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)";
它应该animation。
我没有得到你想修改这些值（即使用variables），但这里是3到4个解决scheme和1个不可能的解决scheme（现在）。
-
服务器端计算 ：为了不时地服务于不同的CSS，可以告诉PHP或任何服务器端语言来parsing
.css文件以及.php或.html，然后在PHP标签之间使用PHPvariables。 当心文件caching：为了避免它，你可以加载样式表像style.css？1234567890随机或时间它会产生一个明显不同的文件，因此将不会被caching -
SASS也是一个需要Ruby的服务器端解决scheme，它将为您提供一个现有的语法，可能比其他人已经提出的关于问题和解决scheme的手工解决scheme更清晰
-
LESS是一个客户端解决scheme，它将加载你的.less文件和一个less.js文件，它将parsing前者，并在你的服务器中为你提供variables。 它也可以使用node.js在服务器端工作
-
显示页面时，CSS是否被dynamic修改 ？
对于2D来说，有Ben Barnett提供的jquery-animate-enhanced ， 2d-transform或者CSS3 rotate是相反的（他们使用CSS3，尽可能使用CSS3，没有这样的function，他们使用现有的jQuery .animate（）和IEmatrixfilter），但就是这样。
您可以为jQuery创build一个插件 ，它将用几个参数来pipe理您想要通过3D转换实现的function，并避免修改DOM中冗长而复杂的CSS规则的麻烦 -
只有CSS ：你可以使用-moz-calc [ 1 ] [ 2 ]，它只在Firefox 4.0中起作用，而-webkit-transform只能用于… OK不要:-)
尝试这样的事情：
var height = {无论您想要检测的高度设置};
element.style.webkitTransform =“translate3d（0px，”+ height * i +“，0px）”;
一个“矮胖”的解决scheme？
根据您select的粒度创build高度变换，例如0-99,100-199，200-299等。每个variables都有一个唯一的animation名称标识符，如：
@-webkit-keyframes run100 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,100px,0px); } } @-webkit-keyframes run200 { 0% { -webkit-transform: translate3d(0px,0px,0px); } 100% { -webkit-transform: translate3d(0px,200px,0px); } }
然后创build匹配的CSS类：
.height-100 div { -webkit-animation-name: run100; } .height-200 div { -webkit-animation-name: run200; }
然后用javascript决定你所在的块，并将相应的类分配给周围的元素。
$('#frame').attr('class', '').addClass('height-100');
可能没关系，如果粒度不太好！
我用warmanp的解决scheme，它的工作，但有一些非常重要的调整。
$('#ticket-marquee-css').text( "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }" );
为了获得CSS转换更新，而不是使用以前定义的值，我必须停止animation，然后重新启动。 为了做到这一点，我在元素上放置了一个“活动”类，并使得CSS仅应用到具有该类的元素的转换
#marquee1.active {-webkit-animation-name: marqueeL;} #marquee2.active {-webkit-animation-name: marqueeR;}
然后，我只需要closures“活动”类，等待它应用在DOM（因此setTimeout），然后重新应用它。
$('.ticket-marquee').removeClass('active'); setTimeout(function() { $('.ticket-marquee').addClass('active'); },1);
这很好用！ 现在我可以dynamic地改变文本移动的距离！
