Question

人们我希望有人可以给我一些帮助。我很长一段时间以来一直是一个堆栈流量阅读器，从有用的人那里学到很多东西。希望如果这个问题得到解答，它也会帮助很多其他人。

我只想简单易用的解决方案，我看到有多疯狂和复杂的人不断回复帖子使其更难。简单而且工作很好。

这里的CSS3动画代码现在“弹跳”有效，“tada”有效但是只有当你为元素分配1或者另一个但是我无法使用“bounce＆amp; 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 =“animated bounce”class =“bounce” 我已经看到了关于添加动画延迟的某个地方：但即使添加动画延迟也只是延迟实际的弹跳动画。

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

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

祝你好运

Answer 2

令人惊讶的是它的作品@Harel Levy，但如果你不介意回答它，它现在会提出另一个问题。

这根本不起作用

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

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

此外，我无法使用方法2转换工作，您是否可能像上面那样举例？

我添加了

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

但它并没有改变。

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

2 个答案: