animation 属性
值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。animation–简单应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ border-radius: 50%; /*圆角 */ animation-name:keep ; animation-duration: 1s; animation-timing-function: linear; } @-webkit-keyframes keep{ from{ margin-left:0 ;/*从哪*/ } to{ /*到哪*/ margin-left: 700px; margin-top: -500px; } } </style> </head> <body> <div></div> </body> </html>一个物体以五角星轨迹运动，找到一个方法，在keyframes中可以用%号来控制这个过程的各个阶段，列如：
keyframes-selector必需的。动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)注意： 您可以用一个动画keyframes-selectors。 @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }完整的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div2{ width: 50px; height: 50px; margin-left: -275px; margin-top: -70px; background-color: yellow; border-radius: 50%; position: fixed; top: 50%; left: 50%; animation-name:keep ; animation-duration: 2s; animation-timing-function:ease; animation-iteration-count: 100; } .div1{ position: fixed; top: 50%; left: 50%; margin-left: -250px; margin-top: -230px ; border-radius: 50%; } @-webkit-keyframes keep{ 0%{ margin-left: -275px; margin-top: -70px; } 20%{ margin-left: 250px; margin-top: -70px; } 40%{ margin-left: -200px; margin-top: 230px; } 60%{ margin-left: -25px; margin-top: -258px; } 80%{ margin-left: 160px; margin-top: 230px; } 100%{ } } </style> </head> <body> <div class="div1"><img src="img/timg.jpg" /></div> <div class="div2"></div> </body> </html>