css 运动背景
原理：
animation-name: bgmove;
animation-duration: 100s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite;
animation介绍：
| 属性 | 描述 |
|---|---|
| animation |
指定定义所有动画属性（除了 animation-play-state 外）的速记值。 |
| animation-delay |
指定显示动画前动画循环内的偏移（从循环开始的时间量）。 此属性值应采用秒作为单位（后面附加“s”—例如 |
| animation-direction |
指定动画循环的播放方向。 将 animation-direction 设置为“正常”""，动画将按预期执行（从属性值 0% 到 100% 执行动画）。将其设置为“反向”""将实现反效果。在多重迭代设置中，值“交替”""和“反向交替”""将导致动画在“正常”""和“反向”""模式间交 替。 |
| animation-duration |
指定完成一个动画循环的时间长度。此属性值应采用秒作为单位（后面附加“s”，例如 |
| animation-fill-mode |
指定在动画开始播放之前或结束播放之后，动画效果是否可见。此属性定义应用于动画结束时的元素的 CSS 属性。如果将该属性设置为“无”""（初始值），则动画元素将在动画完成后返回到其原始样式属性。将此属性设置为“向前”""值，表示在动画结束时应用动 画的最后值（在“to”或“100%”关键帧中指定的值）。 |
| animation-iteration-count |
定义动画循环的播放次数。将此属性设置为“无限”""，将无限期地运行动画。 |
| animation-name |
指定一个或多个动画名称。动画名称标识或选择 CSS @keyframes At-Rule。 |
| animation-play-state |
指定动画是播放还是暂停。使用此属性，你可以通过将该属性值设置为“已暂停”""来暂停动画，通过将其设置为“正在运行”""来恢复动画。请注意将 已结束的动画的 animation-play-state 重置为“正在运行”""，不会重新启动动画。若要重新启动动画，则必须将其重新添加到元素。 |
| animation-timing-function |
指定动画的单次循环期间要使用的中间属性值。 |
body{display: block; background: url('test.png') 5px 5px,url("test.png") 1050px 750px,url("test.png") 1000px -50px; -moz-animation-name: bgmove; -moz-animation-duration: 100s; -moz-animation-timing-function: linear; -moz-animation-delay: 0; -moz-animation-iteration-count: infinite; -webkit-animation-name: bgmove; -webkit-animation-duration: 100s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-name: bgmove; animation-duration: 100s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; } @-moz-keyframes bgmove{ 0%{ background:url('test.png') 5px 5px, url("test.png") 1050px 750px, url("test.png") 1000px -50px; } 100%{ background:url('test.png') 2005px 1005px, url("test.png") 50px -250px, url("test.png") 0 950px; } } @-webkit-keyframes bgmove{ 0%{ background:url('test.png') 5px 5px, url("test.png") 1050px 750px, url("test.png") 1000px -50px; } 100%{ background:url('test.png') 2005px 1005px, url("test.png") 50px -250px, url("test.png") 0 950px; } }
