css动画中希望动画效果线性播放,需要设置属性值()?

html-css020

css动画中希望动画效果线性播放,需要设置属性值()?,第1张

<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属性,用谷歌什么的高版本浏览器看。