animation的具体应用详解

最新推荐文章于 2023-09-16 23:21:27 发布

滴滴月空雨

最新推荐文章于 2023-09-16 23:21:27 发布

阅读量2.1k

点赞数 1

文章标签： div css class animation webkit

本文链接：https://blog.csdn.net/liyuedan/article/details/42487789

版权

<!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>