让一个元素同时执行 2 个 CSS 动画答案

【问题标题】：Have an element with 2 CSS Animations executing at the same time让一个元素同时执行 2 个 CSS 动画
【发布时间】：2011-11-30 04:55:43
【问题描述】：

我正在试验 WebKits 动画。

一个 HTML 元素是否可以同时执行多个动画？

例如：

    @-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;
}

【问题讨论】：

标签： javascript css webkit

【解决方案1】：

#myEle {
    -Webkit-animation-name: FADE,TRICKY;
    -Webkit-animation-duration: 5s,2.5s;
}

使用 ',' 没有空格。我在 Chrome 版本 16.0.899.0 中试用。

【讨论】：

另外，-webkit-animation: FADE 5s,TRICKY 2.5s 有效。我发誓我很久以前就试过了。要么我搞砸了，要么我尝试时不支持它:) jsfiddle.net/ALBDe
逗号分隔动画对我有用。是否可以将动画分配给一个 css 选择器，将另一个动画分配给另一个选择器，然后将这些类组合到一个元素上，例如
？在 Chrome 22 测试版中不适合我，但也许我做错了什么。
我想呈现的不应该实现它们，-webkit-animation-name 属性会被覆盖

【解决方案2】：

我认为你必须手动合并动画。

如果您需要在多个地方使用类似的东西，我会看看Less CSS 或类似的东西，这样您就可以使用“mixins”（例如函数）来生成 css。我使用它来抽象供应商特定的 css，以便在主 .less 文件中，可以用一种方法替换 5 或 6 行特定于浏览器的代码。

【讨论】：