Question

我正在尝试使用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;
}

Answer 1

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

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

Answer 2

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

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

拥有一个同时执行2个CSS动画的元素

2 个答案: