CSS3连续动画实现的思路【演示DEMO】

CSS3动画由animation和@keyframes 结合实现。

在实际开发过程中，经常会用到连续复杂的动画，需要正对每个动画计算执行时长，做出一整套的动画。当然，也可以用javascript动画，一个一个来嵌套。

此处，我要分享的是CSS3的整套动画的实现方法

看一下最终的效果：

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

1.    依次出现三个图片

2.    三个图片合成一个

3.    图片放大消失

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

1.    每个图片单独添加动画，并在每个图片的动画中加入延迟，达到成套动画的效果。

2.    所有图片的动画统一时间，每个动画占其中一部分的时间。

以前我考虑过思路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);}
}

详情可以扫码看Demo：

如果有需要的话，可以留个言，后续我把源码放上来供下载。

 

 

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

（注：表格摘自w3school）

by 无极飞风