使用 JavaScript 动态生成 @-webkit-keyframes CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16226436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
generate @-webkit-keyframes CSS dynamically with JavaScript?
提问by nuway
I can produce
我可以生产
-webkit-animation-name:mymove;
dynamically with
动态地与
object.style.animationName="mymove"
but is it possible to generate something like
但是否有可能产生类似的东西
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
dynamically with JS?
用 JS 动态？
回答by AFwcxx
Yes, i use Jquery library and then apply like so:
是的，我使用 Jquery 库，然后像这样应用：
Say in this situation i want the left value to be dynamic from a div with attribute class value = "push"
说在这种情况下，我希望左值是来自属性类值 =“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();
回答by MistereeDevlord
Consider the idea of how to access the styleSheet...
考虑如何访问样式表的想法...
document.styleSheets[0].insertRule(animationRule)
It's certainly going to be complicated to do well, so briefly you'd want to retain a link and alter the rule associated with each object or something to avoid clutter. Or you could try to run a form of garbage collection with time stamps or something to figure out when the old ones can be removed.
做得好肯定会很复杂，所以简单地说，您需要保留一个链接并更改与每个对象或其他事物相关联的规则以避免混乱。或者，您可以尝试运行一种带有时间戳的垃圾收集形式，或者确定何时可以删除旧的。
From a quick look for other links I found... http://davidwalsh.name/add-rules-stylesheets
通过快速查找我发现的其他链接... http://davidwalsh.name/add-rules-stylesheets
deleteRule
删除规则
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule
insertRule (addRule precedes and is therefore more reliable)
insertRule（addRule 在前面，因此更可靠）
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
I'm also just now noting something else that might be useful...
我现在还注意到其他可能有用的东西......
http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
Actually this looks like a better cleaner understanding or at least another way.
实际上，这看起来像是一种更清晰的理解，或者至少是另一种方式。
http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/
http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/
回答by Atlas Wegman
Okay so if I am understanding correctly this jsfiddleshould do the trick.
好的，如果我理解正确，这个jsfiddle应该可以解决问题。
It uses a pre-defined set of transition properties, and changes the values dynamically via jquery.
它使用一组预定义的过渡属性，并通过 jquery 动态更改值。
The syntax for defining these animations is as follows...
定义这些动画的语法如下...
transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;
By doing this, you can achieve nearly everything you can with @keyframes (not quite everything, but certainly a fair amount), it just happens to be built into the element style. From here you can go on to change whatever you want via jquery. If its the amount to move you can doing something like...
通过这样做，您可以使用@keyframes 实现几乎所有功能（不是全部，但肯定是相当数量），它恰好内置在元素样式中。从这里您可以继续通过 jquery 更改您想要的任何内容。如果它的移动量，你可以做类似的事情......
$("#myElem").css("left", "50px");
and the css3 transition will take care of the rest. If it's something like changing the ease type you can do that too with...
而 css3 过渡将负责其余的工作。如果它类似于更改轻松类型，您也可以使用...
$("#myElem").css("transition-timing-function", "linear");
I know this is not exactly what you were looking for, but chances are it will do the trick.
我知道这并不完全是您要找的东西，但很有可能它会成功。
回答by Jake Cattrall
It looks as if you have an understanding of css3 keyframes. I recommend jQuery.Keyframesto generate keyframes, you can also attach events and callbacks to the animations.
看起来您对 css3 关键帧有一定的了解。我推荐使用jQuery.Keyframes来生成关键帧，您还可以将事件和回调附加到动画中。
回答by darrell
Yes you can, when you write your javascript code, you use the setAttribute() function vs the style() so that you can include more than one type of style. Just insert the animation-name, animation-duration, animation-timing-function or any other types that you wish.
是的，您可以，当您编写 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>
