Question

在#lt，我使用了两个动画，

animation: fadeInStamp .5s linear 1 normal both;
animation: leftArrowBounce .5s linear 1.5s 1 normal both;

但它不起作用，即使是第一个动画也没有显示效果。

但如果我删除第二个，第一个开始工作

CSS

#lt {
    opacity: 0;
    transform: scale(4);
    animation: fadeInStamp .5s linear 1 normal both;
    animation: leftArrowBounce .5s linear 1.5s 1 normal both;
}

@keyframes fadeInStamp {
    0% { opacity: 0; }
    30% { opacity: 1; }
    60% { transform: scale(.7); }
    80% { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes leftArrowBounce {
    0% {  }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

HTML

<div id="lt">&lt;</div>

Answer 1

animation与任何其他CSS一样，如果为属性指定新值，则它将（取决于特异性）覆盖旧属性。因此，当您包含leftArrowBounce动画时，fadeInStamp动画将被忽略。在这种情况下，您没有看到任何事情，因为您的元素opacity 0 leftArrowBounce，但opacity: 1;动画正在发生，您可以通过设置scale看到：

http://jsfiddle.net/yfZ5k/1/

此大小（即leftArrowBounce）也在这里发生变化，因为transform正在覆盖scale属性，因此leftArrowBounce会被animation: fadeInStamp .5s linear 1 normal both, leftArrowBounce .5s linear 1.5s 1 normal both;重置为{{1}动画。

要包含多个动画，您可以用逗号分隔它们：

transform

HOWEVER ，当与延迟值结合使用时，这似乎是当前的错误。当然对于Chrome：

https://code.google.com/p/chromium/issues/detail?id=178413

另外，您在两个动画中更改animation-fill-mode，并且将both设置为animation: fadeInStamp .5s linear 0s 1 normal forwards, leftArrowBounce .5s linear 1.5s 1 normal forwards;时都会导致问题。它适用于Firefox，Opera和IE，使用：

leftArrowBounce

同时明确设置@keyframes leftArrowBounce { 0% { transform: translateX(0); } 50% { transform: translateX(-10px); } 100% { transform: translateX(0); } }的第一帧：

{{1}}

DEMO ：http://jsfiddle.net/yfZ5k/6/（同样，目前无法在Chrome中使用）

Answer 2

用其他

包裹一个动画元素

 <div id="wrap-lt">
   <div id="lt">
       &lt;
   </div>
 </div>

然后为每个元素添加动画

#wrap-lt {
    display: inline-block;
    vertical-align: bottom;
    font: normal 15em/300px sans-serif;
    color: #333;
    opacity: 0;
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    -webkit-animation: fadeInStamp .5s linear 1 normal both;
    -moz-animation: fadeInStamp .5s linear 1 normal both;
    -ms-animation: fadeInStamp .5s linear 1 normal both;
    -o-animation: fadeInStamp .5s linear 1 normal both;
    animation: fadeInStamp .5s linear 1 normal both;
}
#wrap-lt #lt{
    -webkit-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
       -moz-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
        -ms-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
         -o-animation: leftArrowBounce .5s linear 1.5s 1 normal both;
            animation: leftArrowBounce .5s linear 1.5s 1 normal both;
}

DEMO

相同元素上的两个动画不起作用

2 个答案: