图标元素动画效果

一、HTML

<span class="home icon">Home</span>
<span class="search icon">Search</span>
<span class="user icon">User</span>
<span class="mail icon">Mail</span>
<span class="chat icon">Chat</span>

二、CSS

@font-face {
   font-family: 'icon-font';
   src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'),

       url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}
.icon{

   /*使span中的文字不显示*/
   font-size:0px;
   cursor: pointer;
   display:inline-block;
   position:relative;
   width:100px;
   height:100px;

   /*显示圆形背景*/
   border-radius:50%;
   background:#FFF;
   margin-right:20px;

   /*显示圆形背景*/
   -webkit-animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);
   animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);

   /*动画完成后元素保留第一帧的状态*/

   /*因为最后一帧为直接不透明且，动画开始后直接透明，导致图片闪现*/

   /*通过设置animation-fill-mode:both;或backwards解决，使最后动画恢复第一帧状态*/

   -webkit-animation-fill-mode: both;/*backwards*/
   animation-fill-mode: both;

}
.icon::before{
   content:"\e609";
   font-family: 'icon-font';

   /*不能让辅助设备读取*/
   speak: none;
   font-size:50px;
   text-align:center;
   display:block;
   box-sizing:border-box;
   line-height:100px;
   color:#8b8ab3;
}
/*每张图标依次出现*/
.home{
   -webkit-animation-delay:0s;
   animation-delay:0s;
}
.search{
   -webkit-animation-delay:.1s;
   animation-delay:.1s;
}
.user{
   -webkit-animation-delay:.2s;
   animation-delay:.2s;
}
.mail{
   -webkit-animation-delay:.3s;
   animation-delay:.3s;
}
.chat{
   -webkit-animation-delay:.4s;
   animation-delay:.4s;
}
/*图标*/
.home::before{
   content:"\e62e";
}
.search::before{
   content:"\e630";
}
.user::before{
   content:"\e631";
}
.mail::before{
   content:"\e632";
}
.chat::before{
   content:"\e62d";
}

/*图标从下至上运动*/
@-webkit-keyframes 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%);
   }
}