<div></div>
css部分:
div
{
width:100px
height:100px
background:red
position:relative
animation: mymove 5s infinite /*5s动画持续的时间,infinite播放次数循环,如果只运动一次,则不需要加*/
-webkit-animation: mymove 5s infinite/*Safari and Chrome*/
}
@keyframes mymove /*mymove 为动画的名称*/
{
from {left:0px} /*起点*/
to {left:200px} /*终点*/
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px}
to {left:200px}
}
</style>
用css3动画去做
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>00</title>
<style>
.xian{ width:50px height:1px background:#000000 margin-top:100px}
.xian{animation: myfirst 5s}
@keyframes myfirst
{
from {width: 50px}
to {width: 1000px}
}
</style>
</head>
<body>
<div class="xian"></div>
</body>
</html>
低版本浏览器不支持css3属性,用谷歌什么的高版本浏览器看。