CSS动画：链接到一个类的多个动画

我希望有人能给我一些帮助。很长一段时间以来，我一直是stackflow阅读器，从乐于助人的人那里学到了很多东西。希望如果这个问题得到回答，它也能帮助很多其他人

我只想要简单的解决方案，我已经看到人们是多么疯狂和复杂地不断回复帖子，这使得回复变得更加困难。简单和工作就可以了

下面是CSS3动画代码，现在“反弹”和“塔达”都可以工作了 但是，只有当你给元素指定1或另一个，但我不能让它用“bounce&tada”来链接，一旦我看到你是如何把它们联系在一起的，我希望可以链接更多。但就目前而言，2可以作为学习的垫脚石

.bounce {
  animation-name: tada, bounce;
  transform-origin: center bottom;
  animation-duration: 1s;
  animation-fill-mode: both;
  }
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transform: translate3d(0, -15px, 0);
  }
  90% { transform: translate3d(0,-4px,0);
  }
  } 
  @keyframes tada {
  0% {
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  transform: scale3d(1, 1, 1);
  }
  } 
<img src="tag-logo.png" class="animited tada bounce">

.bounce{
动画名称：tada，bounce；
变换原点：中心-底部；
动画持续时间：1s；
动画填充模式：两者都有；
}
@关键帧反弹{
0%, 20%, 53%, 80%, 100% {
过渡计时功能：立方贝塞尔（0.215,0.610,0.355,1.000）；
变换：translate3d（0,0,0）；
}
40%, 43% {
过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
转换：translate3d（0，-30px，0）；
}
70% {
过渡计时功能：立方贝塞尔（0.755,0.050,0.855,0.060）；
转换：translate3d（0，-15px，0）；
}
90%{变换：translate3d（0，-4px，0）；
}
} 
@塔达关键帧{
0% {
变换：scale3d（1,1,1）；
}
10%, 20% {
变换：缩放3d（.9,9,9）旋转3d（0,0,1，-3deg）；
}
30%, 50%, 70%, 90% {
变换：缩放3d（1.1,1.1,1.1）旋转3d（0,0,1,3deg）；
}
40%, 60%, 80% {
变换：缩放3d（1.1,1.1,1.1）旋转3d（0,0,1，-3deg）；
}
100% {
变换：scale3d（1,1,1）；
}
} 

我试过class=“bounce tada”class=“animated bounce”class=“bounce” 我在某些地方见过关于添加动画延迟的内容：但即使添加动画延迟，也只能延迟实际的反弹动画

如果有人能帮我解决这个问题，我会非常感激的。

---

我知道在jquery和transit中使用这个更好，但我甚至不知道从何处开始使用它们的标记代码。

您可以像这样延迟使用动画：

-webkit-animation: animation-one 1s, animation-two .3s;
-moz-animation: animation-one 1s, animation-two .3s;
animation-delay: 0s, 1s;

或者像这样延迟转换，它会一个接一个地改变属性

transition: 
  /* step 1 */
  width      1s,
  /* step 2 */
  background 0.5s 1s;

---

祝你好运

这真是太神奇了@Harel Levy，但如果你不介意回答的话，现在又提出了另一个问题

这根本不起作用

animation-name: tada 1s, bounce .3s; 
animation-delay: 0s, 1s;

但是，如果您从类中删除-name部分，它可以正常工作吗？它不需要在CSS3中将“animation name”定义为类，而不是animaton:？我不明白为什么动画名称：停止工作，但动画：使其工作。我猜这是因为你的方法是速记对吗

另外，我无法使用方法2转换使其工作。您是否可以像上面那样举个例子

我补充说

过渡：宽度1s，背景0.5s 1s；在动画下：/animation name:

但这并没有改变