Css 同一元素上的两个动画不工作

|

在

#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>

---

动画

与任何其他CSS一样，如果为属性指定一个新值，则它将（取决于特定性）覆盖旧值。因此，当包含

leftArrowBounce

动画时，

fadeInStamp

动画将被忽略。 在这种情况下，由于元素的

不透明度
为
0
，您看不到任何事情发生，但是
leftArrowBounce
动画正在发生，您可以通过设置
不透明度：1：


此处的大小（即
缩放
）也在更改，因为
左箭头反弹
正在覆盖
变换
属性，因此
缩放
作为
左箭头反弹
动画的一部分重置

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

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

然而，当与延迟值一起使用时，这似乎是当前的错误。当然，对于Chrome：


同样，在两个动画中更改
变换
，并将
动画填充模式
设置为
两个
会导致问题。它在Firefox、Opera和IE中使用：

animation: fadeInStamp .5s linear 0s 1 normal forwards,
           leftArrowBounce .5s linear 1.5s 1 normal forwards;

明确设置
leftArrowBounce
的第一帧时：

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

演示：（同样，当前在chrome中不起作用）
将一个动画元素与另一个动画元素包装在一起

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

使用两个div为每个div提供一个动画。嘿，感谢您提供的精彩信息，了解bug总是很有帮助的。我最终决定将这两个动画合并成一个长而复杂的动画，需要大量的数学运算，但现在它在每个浏览器上都非常有效。
#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;
}