您的位置：首页 > 其它

animation的具体应用详解

2015-01-07 10:10 190 查看

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>animation的具体应用详解</title>
<style>
.b{ background: url(icon_up.png) no-repeat 50% top; background-size:20px 10px; height:100px; width:580px;	-webkit-animation: moveIconUp ease 1.5s both infinite;
animation: moveIconUp  ease 1.5s both infinite;}
@-webkit-keyframes moveIconUp {
0% { -webkit-transform: translateY(100%); opacity:0;}
50% { -webkit-transform: translateY(50%); opacity:1;}
100% { -webkit-transform: translateY(0%); opacity:0;}
}
@keyframes moveIconUp {
0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity:0;}
50% { -webkit-transform: translateY(50%); transform: translateY(50%); opacity:1;}
100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity:0;}
}
}

</style>
</head>

<body>
<div style="background-color:#09F">
<div class="b"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航