css3简单动画demo

66 阅读 0 评论 44 点赞

我是靠谱客的博主矮小纸鹤，这篇文章主要介绍css3简单动画demo，现在分享给大家，希望可以做个参考。

代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <!-- 使用新内核 -->
    <title>财政会计行业管理系统</title>
<style>
div{
/*position必须设置为relative*/
position:relative;

width:20px;
height:20px;
background-color:red;
/*ie10 firfox Opera支持animation;chrome,safari支持-webkit-animation*/
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}

@keyframes mymove{
from{
	top:0px;
}
to{
	top:20px;
}
}

@-webkit-keyframes mymove{
from{
	top:0px;
}
to{
	top:20px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>