css 运动背景

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-delay: 2s;）
animation-direction	指定动画循环的播放方向。 将 animation-direction 设置为“正常”""，动画将按预期执行（从属性值 0% 到 100% 执行动画）。将其设置为“反向”""将实现反效果。在多重迭代设置中，值“交替”""和“反向交替”""将导致动画在“正常”""和“反向”""模式间交 替。
animation-duration	指定完成一个动画循环的时间长度。此属性值应采用秒作为单位（后面附加“s”，例如 animation-duration: 2s;）
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;
}
}