javascript 有一个元素同时执行 2 个 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8321329/
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
Have an element with 2 CSS Animations executing at the same time
提问by sazr
I am experimenting with WebKits animations.
我正在试验 WebKits 动画。
Is it possible for a HTML element to have more than one animation executing at the same time?
一个 HTML 元素是否可以同时执行多个动画？
For example:
例如：
@-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
上面是一个非常简单的例子。我会有很多动画库，比如旋转、淡入淡出等。如果我想让一个元素同时执行 2 个动画，我不想写一个特殊的动画。
Is this possible...
这可能吗...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
@-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}
回答by lemon֣
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.
使用 ',' 没有空格。我是在 Chrome 版本 16.0.899.0 中尝试的。
回答by Stein G. Strindhaug
You'll have to manually merge the animations, I think.
我想你必须手动合并动画。
If you need to use something like this in several places I'd take a look at Less CSSor similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.
如果你需要在几个地方使用这样的东西，我会看看Less CSS或类似的东西，这样你就可以使用“mixins”（例如函数）来生成 css。我使用它来抽象供应商特定的 css，以便在主 .less 文件中，5 或 6 行浏览器特定代码可以用一种方法替换。
