上一篇中，四个图标的动画效果都是同时进行的；为了使图标由先后顺序，我们将每个动画添加延迟。如下图：

在线演示（刚一加载效果不明显，刷新一下）

html:

<div class="box icon1"><i class="fa fa-home fa-4x"></i>
</div>
<div class="box  icon2"><i class="fa fa-search fa-4x"></i>
</div>
<div class="box icon3"><i class="fa fa-qq fa-4x"></i>
</div>
<div class="box icon4"><i class="fa fa-envelope-o fa-4x"></i>
</div>

css：

body {background-color: pink;}
.box {cursor: pointer;display: inline-block;width: 100px;height: 100px;border-radius: 50%;background-color: #96CEB4;position: relative;margin-right: 20px;-webkit-animation: move 1s;animation: move 1s;-webkit-animation-fill-mode: both;/*解决动画结束后，图标恢复默认消失不见状态*/animation-fill-mode: both;
}i {color: #FFEEAD;font-size: 48px;position: absolute;top: 16%;left: 20%;
}/*定义动画*/
@-webkit-keyframes move { /*兼容性写法。move是关键帧的动画名称*/from { /*动画起始状态*/opacity: 0;-webkit-transform: translateY(100%);}to { /*动画结束状态*/opacity: 1;-webkit-transform: translateY(0%);}
}
@keyframes move {from {opacity: 0;transform: translateY(100%);}to {opacity: 1;transform: translateY(0%);}
}/*动画延迟*/
.icon1 {-webkit-animation-delay: 0s;animation-delay: 0s;
}
.icon2 {-webkit-animation-delay: .1s;animation-delay: .1s;
}
.icon3 {-webkit-animation-delay: .2s;animation-delay: .2s;
}
.icon4 {-webkit-animation-delay: .3s;animation-delay: .3s;
}

解析：
如果不添加animation-fill-mode属性，会出现：在动画的最开头几个图标将在顶部一闪而过；
原因是：除第一个图标外，其余图标都有一定的动画延迟，而在动画没有开始时，，图标并没有发生偏移，而且是完全不透明的，只有当动画开始的那一瞬间，图标才会切换到完全透明且偏移的动画起始状态。
解决：可以尝试使这几个图标的默认状态就是发生偏移且完全透明的，但即使这样修改后，我们发现动画开头的闪现问题解决了，新的问题又发生了，当动画结束后，这几个图标又恢复到了其默认状态，即全部消失不见了。要解决这一问题，就要使用animation动画的animation-fill-mode属性。该例中，值为backwards或both均可；

animation-fill-mode属性规定了元素在动画事件之外的状态是怎样的。

下表为animation-fill-mode的属性值

值	含义
forwards	表示动画完成后保留最后一个关键帧中的属性值；
backwards	恰好相反，表示在动画延迟之前的就使得元素应用第一个关键帧中的属性值；
both	表示同时包含forwards和backwards两种设置