做了一个类似天猫鼠标经过icon的动画，记录一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
/* 渐变颜色参数，类型，开始坐标，结束坐标，开始颜色，结束颜色，过度点颜色（可选） */
.cont {
100px;
height: 100px;
//background-color: #FCC;
margin-left: 50%;
margin-top: 100px;
overflow:hidden;
padding-top:10px;
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.2)),color-stop(1%,#fff));
}
.cont i { 24px ; height:24px; text-align:center; line-height:24px; font-style:normal; background-color:#09F; color:#fff; border-radius:50%; display:block; margin:0 auto;}
.cont p { text-align:center;}
.cont:hover i {
-webkit-animation: toTopFromBottom .3s forwards;
/* 调用动画名称时间结束状态 */

}
/* 定义动画*/
@-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform:translateY(-100%)
}
50% {
opacity:.3;
-webkit-transform:translateY(40%)
}
51% {
opacity:1
}
}
</style>
</head>

</body>

</html>