css3 - 图标元素动画效果4 - 动画延迟

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

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















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两种设置