CSS 动画：多个动画链接到 1 个类答案

【问题标题】：CSS Animations : multiple animations chained to 1 classCSS 动画：多个动画链接到 1 个类
【发布时间】：2017-04-13 19:36:13
【问题描述】：

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

我只想要简单简单的解决方案，我已经看到人们不断回复帖子变得更加疯狂和复杂。简单又好用。

这里的 CSS3 动画代码现在“反弹”有效，“tada”有效但只有当你将 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">

我试过了 class="bounce tada" class="动画弹跳" class="bounce" 我在某处看到过添加动画延迟：但即使添加动画延迟，也只有延迟是实际的弹跳动画。

如果有人能帮我解决这个问题，我将不胜感激。我知道最好将它与 jquery、transit 一起使用，但我不知道从哪里开始它们的标记代码。

【问题讨论】：

标签： css animation css-transitions

【解决方案1】：

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

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

祝你好运

【讨论】：

【解决方案2】：

这很神奇@Harel Levy，但如果你不介意回答它，它现在会提出另一个问题。

这根本不起作用

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

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

另外，我无法使用方法 2 转换来让它工作，你能像上面那样举一个例子吗？

我加了

transition: width 1s, background 0.5s 1s; under animation: / animation-name:

但它并没有改变。

【讨论】：