css3

来源：互联网发布：动态地图制作软件编辑：程序博客网时间：2024/06/03 22:41

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

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

这里写图片描述

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

0 0