链接多个CSS动画 [英] Chaining Multiple CSS Animations

查看：94
本文介绍了链接多个CSS动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图链接2个CSS动画，请参阅笔： http://codepen.io/jdesilvio / pen / pjwvyO



我遵循其他类似问题的答案中提供的语法，但它们似乎并不正确地工作：

  animation-name：falling，laydown; 
动画持续时间：2000ms，1000ms; 
动画定时功能：缓入，缓出; 
 animation-iteration-count：1，1;

它正在播放第二个动画，然后是第一个，最后是第二个动画。我怎么才能让它发挥第一个，然后第二个？



以下是完整的代码： 

 <！DOCTYPE html>< meta charset =utf-8>< style> html，body {height：100％; } body {display：flex; align-items：center; justify-content：center;} @关键帧下降{0％{transform：translate3d（0，-400px，0）; } 100％{transform：translate3d（0，40％，0）rotateX（30deg）rotateY（0deg）rotateZ（60deg）; }} @ keyframes laydown {0％{transform：translate3d（0，40％，0）rotateX（30deg）rotateY（0deg）rotateZ（60deg）; } 100％{transform：translate3d（0，40％，0）rotateX（70deg）rotateY（0deg）rotateZ（80deg）; }}＃falling-card-parent {height：150px;宽度：100px;保证金：汽车; perspective：1000px;}＃falling-card {height：150px;宽度：100px;背景颜色：黑色;保证金：汽车; transform：translate3d（0，40％，0）rotateX（70deg）rotateY（0deg）rotateZ（80deg）;动画名称：落下，放下;动画持续时间：2000ms，1000ms;动画定时功能：缓入，缓出; animation-iteration-count：1，1;}< / style>< html> <身体GT; < div id =falling-card-parent> < div id =falling-card>< / div> < / DIV> < / body>< / html>

解决方案

这个问题实际上并不是与动画的顺序有关，而是因为pme元素上的多个动画是如何工作的。在元素上添加多个动画时，默认情况下它们同时开始。因此， laydown 和下降 动画在同一时间开始，但 laydown 动画实际上从一开始就在 1000ms 内完成，但第一个动画（即下降）直到 2000ms 。



有关动画的 W3C规范还提到了有关多个动画的以下内容如果多个动画试图修改相同的属性，那么最接近列表末尾的动画在所提供的代码中，这两个动画都试图修改变换

。
code>属性，第二个动画是最接近结束的。因此，当第二个动画仍在运行时（即前1000毫秒），将应用第二个动画中指定的变换更改。在此期间，第一个动画仍在运行，但由于其值被覆盖，所以它没有效果。在第二个1000ms（当第二个动画已经完成但第一个仍在执行时），将按照第一个动画的指示应用变换。这就是为什么它看起来好像第二个动画在第一个动画之前运行，然后是第一个动画。





要解决这个问题问题，第二个动画的执行应该暂停（或延迟），直到第一个动画完成。这可以通过添加动画延迟（即等于第一个动画的动画持续时间）来完成，第二动画。

  animation-name：falling，laydown; 
动画持续时间：2000ms，1000ms; 
动画延迟：0ms，2000ms; / *添加此* / 
动画定时功能：易入，易出; 
 animation-iteration-count：1，1;

html，body {height：100％;} body {display：flex; align-items：center; justify-content：center;} @关键帧下降{0％{transform：translate3d（0，-400px，0）; } 100％{transform：translate3d（0，40％，0）rotateX（30deg）rotateY（0deg）rotateZ（60deg）; }} @ keyframes laydown {0％{transform：translate3d（0，40％，0）rotateX（30deg）rotateY（0deg）rotateZ（60deg）; } 100％{transform：translate3d（0，40％，0）rotateX（70deg）rotateY（0deg）rotateZ（80deg）; }}＃falling-card-parent {height：150px;宽度：100px;保证金：汽车; perspective：1000px;}＃falling-card {height：150px;宽度：100px;背景颜色：黑色;保证金：汽车; transform：translate3d（0，40％，0）rotateX（70deg）rotateY（0deg）rotateZ（80deg）;动画名称：落下，放下;动画持续时间：2000ms，1000ms;动画延迟：0ms，2000ms;动画定时功能：缓入，缓出; animation-iteration-count：1，1;}

< ; script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div id =falling-card-parent > < div id =falling-card>< / div>< / div>

$ b

I am trying to chain together 2 CSS animations, see pen: http://codepen.io/jdesilvio/pen/pjwvyO

I have followed the syntax provided in other answers to similar questions, but they don't seem to work correctly:

animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;

It is playing the second animation, then the first and finally the second one again. How can I get it to play the first, then second?

Here is the full code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes falling {
  0% {
    transform: translate3d(0, -400px, 0);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
}

@keyframes laydown {
  0% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(30deg)
      rotateY(0deg)
      rotateZ(60deg);
  }
  100% {
    transform:
      translate3d(0, 40%, 0)
      rotateX(70deg)
      rotateY(0deg)
      rotateZ(80deg);
  }
}

#falling-card-parent {
  height: 150px;
  width: 100px;
  margin: auto;
  perspective: 1000px;
}

#falling-card {
  height: 150px;
  width: 100px;
  background-color: black;
  margin: auto;
  transform:
    translate3d(0, 40%, 0)
    rotateX(70deg)
    rotateY(0deg)
    rotateZ(80deg);
  animation-name:
    falling, laydown;
  animation-duration:
    2000ms, 1000ms;
  animation-timing-function:
    ease-in, ease-out;
  animation-iteration-count:
    1, 1;
}

</style>
<html>
  <body>
    <div id="falling-card-parent">
      <div id="falling-card"></div>
    </div>
  </body>
</html>

解决方案

The problem is actually not with the order of the animations but because of how multiple animations on pme element works. When multiple animations are added on an element, they start at the same time by default.

Because of this, both the laydown and falling animations start at the same time but the laydown animation actually completes within 1000ms from the start but the first animation (which is falling) doesn't complete till 2000ms.

The W3C spec about animations also say the following about multiple animations accessing the same property during animation:

If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.

In the code provided in question, both animations are trying to modify the transform property and the second animation is the closest to the end. So while the second animation is still running (which is, for the first 1000ms) the transform changes are applied as specified in the second animation. During this time the first animation is still running but it has no effect because its values are overwritten. In the 2nd 1000ms (when the second animation has already completed but 1st is still executing), the transforms are applied as directed by the first animation. This is why it looks as if the second animation is running before the first animation and then the first.

To fix this problem, the execution of the second animation should be put on hold (or delayed) until the time the first animation is complete. This can be done by adding a animation-delay (that is equal to the animation-duration of the first animation) for the second animation.

animation-name: falling, laydown;
animation-duration: 2000ms, 1000ms;
animation-delay: 0ms, 2000ms; /* add this */
animation-timing-function: ease-in, ease-out;
animation-iteration-count: 1, 1;


html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes falling {
  0% {
    transform: translate3d(0, -400px, 0);
  }
  100% {
    transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
  }
}
@keyframes laydown {
  0% {
    transform: translate3d(0, 40%, 0) rotateX(30deg) rotateY(0deg) rotateZ(60deg);
  }
  100% {
    transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
  }
}
#falling-card-parent {
  height: 150px;
  width: 100px;
  margin: auto;
  perspective: 1000px;
}
#falling-card {
  height: 150px;
  width: 100px;
  background-color: black;
  margin: auto;
  transform: translate3d(0, 40%, 0) rotateX(70deg) rotateY(0deg) rotateZ(80deg);
  animation-name: falling, laydown;
  animation-duration: 2000ms, 1000ms;
  animation-delay: 0ms, 2000ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="falling-card-parent">
  <div id="falling-card"></div>
</div>

这篇关于链接多个CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆