我可以生产
-webkit-animation-name:mymove;
动态地用
object.style.animationName="mymove"
但是是否可以生成类似的东西
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
用 JS 动态？
【问题讨论】：
标签： javascript jquery html css
是的，我使用 Jquery 库，然后像这样应用：
假设在这种情况下，我希望左值是来自属性类值 =“push”的 div 的动态
<!--HTML-->
<div class="push">Wall</div>
//--JS--
var KeyFrame =
{
init: function(){
if(!KeyFrame.check)
{
//get the left position
var pushLeft = $('.push').position().left;
//set the style and append to head
var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
//so u don't keep appending style to head
KeyFrame.check = true;
}
}
}
KeyFrame.init();
【讨论】：
考虑如何访问 styleSheet...
document.styleSheets[0].insertRule(animationRule)
要做好肯定会很复杂，所以简单地说，您希望保留一个链接并更改与每个对象或其他东西关联的规则以避免混乱。或者，您可以尝试运行一种带有时间戳的垃圾收集形式，或者确定何时可以删除旧的。
快速查找我发现的其他链接... http://davidwalsh.name/add-rules-stylesheets
删除规则
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule
insertRule（addRule 优先，因此更可靠）
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
我现在还注意到其他可能有用的东西...
http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
实际上，这看起来像是一种更清晰的理解，或者至少是另一种方式。
http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/
【讨论】：
好的，如果我理解正确的话，jsfiddle 应该可以解决问题。
它使用一组预定义的转换属性，并通过 jquery 动态更改值。
定义这些动画的语法如下...
transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;
通过这样做，您几乎可以使用@keyframes 实现所有功能（不是所有功能，但肯定相当多），它恰好内置在元素样式中。从这里您可以继续通过 jquery 更改您想要的任何内容。如果它的移动量你可以做类似...
$("#myElem").css("left", "50px");
css3 转换将负责其余的工作。如果它类似于更改轻松类型，您也可以这样做......
$("#myElem").css("transition-timing-function", "linear");
我知道这不是您想要的，但它很可能会成功。
【讨论】：
看起来你好像对 css3 关键帧有所了解。我推荐jQuery.Keyframes 来生成关键帧，你也可以给动画附加事件和回调。
【讨论】：
是的，您可以在编写 javascript 代码时使用 setAttribute() 函数与 style() 函数，这样您就可以包含一种以上的样式。只需插入动画名称、动画持续时间、动画定时功能或您希望的任何其他类型。
<!DOCTYPE html>
<html>
<head>
<title> Welcome </title>
<meta charset = "utf-8">
<style>
@keyframes appear-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#landing-page {
width: 100%;
height: 1000px;
}
</style>
<script>
window.addEventListener('load', function(){setTimeout(renderService, 1000)});
function renderService(){
var server = document.getElementById('Services');
server.setAttribute("style", "animation-name: appear-in; animation-duration: 5s; animation-timing-function: ease-in; background-image: url('https://wallpaperaccess.com/full/949819.jpg'); background-size: 80% 100%; background-position: center");
}
</script>
</head>
<body>
<div id = "landing-page">
</div>
</body>
</html>
【讨论】：