用JavaScript设置从/到参数的webkit关键帧

有什么方法可以用JavaScript设置webkit关键帧的from或to？用JavaScript设置从/到参数的webkit关键帧

2010-07-25 Ricardo

我也有兴趣在此。我相信他意味着从Javascript中定义动画（webkit的@ -webkit-keyframes）。 Spec：http：//www.w3.org/TR/css3-animations/ – 2010-07-26 11:00:20

刚注意到该规范的底部，有一个DOM接口，引用为：“CSS动画通过CSS一对描述关键帧的新接口。“ 有谁知道这是如何通过Javascript访问/使用？ – 2010-07-26 11:10:30

@ adam-heath - 请参阅我的答案，了解使用DOM界面的示例。 – 2012-11-19 11:02:52

了各种各样的解决方案：

var cssAnimation = document.createElement('style'); 
cssAnimation.type = 'text/css'; 
var rules = document.createTextNode('@-webkit-keyframes slider {'+ 
'from { left:100px; }'+ 
'80% { left:150px; }'+ 
'90% { left:160px; }'+ 
'to { left:150px; }'+ 
'}'); 
cssAnimation.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

只是增加了一个样式定义的标题。如果可能的话，通过DOM定义它会更清晰/更好。

编辑：错误在Chrome与旧方法

来源

2010-07-26 11:20:26

为什么不使用CSSOM API呢？ – 2011-03-20 01:33:10

为了解决这个我添加了一个“WebKit的动画名称”我的CSS选择器，然后创建单独的规则为我的选择，在我的例子红色和黄色着色：

.spinner { 
-webkit-animation-name: spinnerColorRed; 
} 

@-webkit-keyframes spinnerColorRed { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Red; 
    } 
} 

@-webkit-keyframes spinnerColorYellow { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Yellow; 
    } 
}

然后使用jQuery：

$("#link").click(function(event) { 
    event.preventDefault(); 
    $(".spinner").css("-webkit-animation-name", "spinnerColorYellow"); 
});

来源

2011-06-11 20:56:27

不要在没有必要的情况下使用jQuery ......而这种情况并非如此。 – m93a 2012-09-26 15:48:57

我处理这个问题是没有设置任何的方式从或元素的风格我在CSS文件和befo正在操纵重新触发动画我将设置它应该与JavaScript的元素样式。这样你就可以自由地动态管理什么东西应该做，直到我们可以在js中直接管理它。你只需要指定其中的一个。 setTimeout允许在动画触发之前将css规则应用到元素，否则你将会有竞争条件并且不会动画。


#someDiv.slideIn { 
    -webkit-animation: slideIn 0.5s ease; 
} 

@-webkit-keyframes slideIn { 
    0% { 
     left:0px; 
    } 

    100% {} 
} 


var someDiv = document.getElementById('someDiv'); 
someDiv.style.left = '-50px'; 
setTimeout(function(){ 
    someDiv.addClass('slideIn'); 
},0);

来源

2011-07-05 19:45:55 mroy

您可以使用CSS DOM接口。例如：

<html> 
    <body> 
     <style> 
     @keyframes fadeout { 
      from { opacity:1; } 
      to { opacity:0; } 
     } 
     </style> 
     <script text="javascript"> 
      var stylesheet = document.styleSheets[0]; 
      var fadeOutRule = stylesheet.cssRules[0]; 
      alert(fadeOutRule.name); // alerts "fadeout" 

      var fadeOutRule_From = fadeOutRule.cssRules[0]; 
      var fadeOutRule_To = fadeOutRule.cssRules[1]; 
      alert(fadeOutRule_From.keyText); // alerts "0%" (and not "from" as you might expect) 
      alert(fadeOutRule_To.keyText); // alerts "100%" 

      var fadeOutRule_To_Style = fadeOutRule_To.style; 

      alert(fadeOutRule_To_Style.cssText); // alerts "opacity:0;" 

      fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red 
      fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity 

      alert(fadeOutRule_To_Style.cssText); // alerts "color:red;" 
     </script> 
    </body> 
</html>

来源

2012-11-16 20:05:53

+1为明确的步骤降低DOM级别！ – cdehaan 2014-03-28 03:59:03

这个例子介绍了几个不同的浏览器：

var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""]; 
var keyFrames = []; 
var textNode = null; 

for (var i in keyFramePrefixes){ 

keyFrames = '@'+keyFramePrefixes[i]+'keyframes cloudsMove {'+ 
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+ 
'to {'+keyFramePrefixes[i]+'transform: translate(1440px' 
'px,0px);}}'; 

textNode = document.createTextNode(keyFrames); 
document.getElementsByTagName("style")[0].appendChild(textNode); 
}

来源

2014-12-08 02:24:51

用JavaScript设置从/到参数的webkit关键帧

回答

相关问题