<!-- animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。 默认值： none 0 ease 0 1 normal 继承性： no 版本： CSS3 JavaScript 语法： object.style.animation="mymove 5s infinite" animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。 通过 @keyframes 规则，您能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。 注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试动画animation</title> <style> .div { 100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ -moz-animation:mymove 5s infinite; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } @-moz-keyframes mymove /* Firefox */ { from {left:0px;} to {left:200px;} } </style> </head> <body> <div class="div"></div> </body> </html>