CSS3连续动画实现的思路，组合动画

CSS3动画由animation和@keyframes 结合实现出来的。
在实际开发过程中，经常会用到连续复杂的动画，需要正对每个动画计算执行时长，做出一整套的动画。当然，也可以用javascript动画，一个一个来嵌套。
此处，我要分享的是CSS3的整套动画的实现方法
看一下最终的效果：

CSS3连续动画.gif

先来分析一下这套动画，整套动画可以分解成三个部分：

• 依次出现三个图片
• 三个图片合成一个
• 图片放大消失

要实现这套动画，我想到的CSS3思路有两个：

• 每个图片单独添加动画，并在每个图片的动画中加入延迟，达到成套动画的效果。
• 所有图片的动画统一时间，每个动画占其中一部分的时间。

以前我考虑过思路1，在实际开发中，遇到了问题：延迟不好调整，动画的衔接容易出问题。
经过多方面的思考，最后用了思路2。

下面说一下我的实现方案：
整体动画时长，大概定了5秒钟，即100%为5s（具体时间以动画为准，此处动画为了看清效果，整体放慢了一些）。
第一个动画，依次出现的时间，调整到了25%，每个图片出现的时间往后顺推6%，到37%的时候，三个图片出现完毕（0%-25%，6%-31%，12%-37%）。
第二个动画，第一张图片和第三张图片，飞到第二张图片的位置（44%-50%）
第三个动画，只处理第三个图片，前面两个图片，在51%-52%的时候，悄悄的隐藏掉了。第三个图片做了放大处理（60%-80%）。
具体动画代码如下：

@keyframes anm_img_1
{
  0% {left: 10vw; top:45vh; opacity: 0;}
  25%, 44% {left: 10vw; top:40vh; opacity: 0.7;}
  50%, 51% {left: 40vw; top:40vh; opacity: 1;}
  52%, 100% {left: 40vw; top:40vh; opacity: 0;}
}
@keyframes anm_img_2
{
  0%, 6% {top:45vh; opacity: 0;}
  31%, 44% {top:40vh; opacity: 0.7;}
  50%, 51% {left: 40vw; top:40vh; opacity: 1;}
  52%, 100% {left: 40vw; top:40vh; opacity: 0;}
}
@keyframes anm_img_3
{
  0%, 12%  {left: 70vw; top:45vh; opacity: 0;}
  37%, 44% {left: 70vw; top:40vh; opacity: 0.7;}
  50%, 60% {left: 40vw; top:40vh; opacity: 1; transform: scale(1);}
  80%, 100% {left: 40vw; top:40vh; opacity: 0; transform: scale(10);}
}