在线演示（刚开始打开效果不明显，刷新一下）
初始状态使图标初始位置向下偏移-100%，然后再向上移动到初始位置，在此过程中同时使图标同步变化，由完全透明变化为完全不透明。
html:
<div class="box"> <i class="fa fa-home fa-4x"></i> </div> <div class="box"> <i class="fa fa-search fa-4x"></i> </div> <div class="box"> <i class="fa fa-qq fa-4x"></i> </div> <div class="box"> <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; } 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%); } }解析： move 关键帧动画名称。 translateY使图标向下偏移。 opacity设置图标透明度。
