我有一个同时执行2个CSS动画的元素
我有一个同时执行2个CSS动画的元素
提问于 2011-11-30 12:55:44
我正在试验WebKits动画。
一个元素可以同时执行多个动画吗？
例如：
@-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;
}上面是一个非常简单的例子。我会有很多动画库，比如旋转、淡入淡出等等。如果我想让一个元素同时执行2个动画，我不想写一个特殊的动画。
有没有可能..。
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
@-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}回答 2
Stack Overflow用户
发布于 2011-12-01 10:28:29
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}使用'，‘不使用空格。我在Chrome版本16.0.899.0中尝试过。
Stack Overflow用户
发布于 2011-11-30 13:13:49
我想，你必须手动合并动画。
如果你需要在几个地方使用类似的东西，我会看一看Less CSS或类似的东西，这样你就可以使用“混合”(例如函数)来生成css。我使用它来抽象特定于供应商的css，以便在主.less文件中，5或6行特定于浏览器的代码可以被一种方法替换。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8321329
复制相关文章
相似问题