您可以内联（即在 HTML 样式属性中）更改 CSS3 动画关键帧属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6510094/
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
Can you change CSS3 animation keyframe attributes inline (i.e. in the HTML style attribute)?
提问by Koop
Is it possible to change the animation keyframe attributes by making inline adjustments.
是否可以通过内联调整来更改动画关键帧属性。
Take for example
以
@-moz-keyframes slidein {
from {
width: 10%;
}
to {
width:50%;
}
}
Would it be possible to change the width attribute in the 'to' portion of the keyframe, by doing something like
是否可以通过执行类似的操作来更改关键帧的“to”部分中的宽度属性
<div id="someID" style="change keyframe here">
For the time being I am just creating an entire style sheet dynamically on the page in order to customize the keyframes.
目前，我只是在页面上动态创建整个样式表，以便自定义关键帧。
This method works, however I would much rather adjust the attributes inline for simplicity.
这种方法有效，但是为了简单起见，我更愿意内联调整属性。
采纳答案by Madara's Ghost
No. since the animation is not declaredin the element, it's only calledupon it. It's like trying to add methods into an object instead of to a class. Not possible, sorry ;)
不，因为动画没有在元素中声明，它只是被调用。这就像尝试将方法添加到对象而不是类中。不可能，对不起;)
回答by Delmarc Eric Rosario
Hey so lets think a little different... You may not be able to do this...
嘿，让我们想想有点不同......你可能无法做到这一点......
<div id="someID" style="change keyframe here">
but think of doing it like this...
但想想这样做...
<script>
var createdStyleTag = document.createElement("style");
createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+
"from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+
"to{ width: 10%; }"+
"}";
document.body.appendChild(createdStyleTag);
</script>
This is pretty open to whatever you want to do... you would always have the classes you will put on elements but sometimes we dont want to constantly have the same "from" and "to" so this can be one way to do this... basically you dynamically create a style element put whatever string that will end up being the needed style text and then append it to the body... works pretty good... used it in my own framework... I don't do it exactly like this but I wrote it out like this for visibility... reason why this works in a good way is cause a lot of my DOM is created dynamically as well so it may make more sense in that implementation...
这对您想做的任何事情都非常开放……您将始终拥有将放在元素上的类，但有时我们不想经常使用相同的“from”和“to”，因此这可能是一种方法...基本上你动态创建一个样式元素，把最终成为所需样式文本的任何字符串添加到正文中......效果很好......在我自己的框架中使用它......我不'不完全像这样，但为了可见性，我是这样写的......之所以能以一种好的方式工作是因为我的很多 DOM 也是动态创建的，所以它在该实现中可能更有意义......
Nothing is impossible... just think outside the div
没有什么是不可能的......只是在div之外思考
回答by Zetura
I was searching for a solution for inline keyframe too. At least for the "to" value. CSS Tricks give a good solution, just forget the "to" and place the width inline ;) http://css-tricks.com/animate-to-an-inline-style/
我也在寻找内联关键帧的解决方案。至少对于“to”值。CSS Tricks 提供了一个很好的解决方案，只需忘记“to”并将宽度内联放置；) http://css-tricks.com/animate-to-an-inline-style/
回答by flyingace
This solution sounds a lot like the one you may already be implementing, but it's very well explained and thought out: Set Webkit Keyframes Values Using Javascript Variable
这个解决方案听起来很像您可能已经在实施的解决方案，但它得到了很好的解释和深思熟虑： Set Webkit Keyframes Values Using Javascript Variable
回答by Karim Haddad
as @Zetura said the best way to do it is to forget the "to" property and it will take the default value of the width or height or any thing you put it to the as example for me its work :
正如@Zetura 所说，最好的方法是忘记“to”属性，它会采用宽度或高度的默认值，或者你把它作为我工作示例的任何东西：
@keyframes slideInUp {
0% {
height: 0px;
}
}
