<div id="bluray">
<div class="bg"></div>
</div>
#bluray {
background: url(br.png) no-repeat;
width: 840px;
height: 446px;
margin: 50px auto;
}
#bluray .bg {
background: url(br_bg.jpg) repeat;
height: 446px;
overflow: hidden;
position: relative;
z-index: -1;
-webkit-animation-name: bg_animation;
-webkit-animation-duration:50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: bg_animation;
-moz-animation-duration:50s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: bg_animation;
animation-duration:50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes bg_animation {
0% { background-position: 1279px bottom; }
100% { background-position: left bottom; }
}
@-moz-keyframes bg_animation {
0% { background-position: 1279px bottom; }
100% { background-position: left bottom; }
}
@keyframes bg_animation {
0% { background-position: 1279px bottom; }
100% { background-position: left bottom; }
}
<div id="bluray">
<div class="bg"></div>
</div>
#bluray {
background: url(br.png) no-repeat;
width: 840px;
height: 446px;
margin: 50px auto;
}
#bluray .bg {
background-repeat: repeat;
background-image: -moz-linear-gradient(left, #42425b 0%, #05abe0 40%, #05abe0 60%, #42425b 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#42425b), color-stop(40%,#05abe0), color-stop(60%,#05abe0), color-stop(100%,#42425b));
background-image: -webkit-linear-gradient(left, #42425b 0%,#05abe0 40%,#05abe0 60%,#42425b 100%);
background-image: linear-gradient(left, #42425b 0%,#05abe0 40%,#05abe0 60%,#42425b 100%);
width: 840px;
height: 446px;
overflow: hidden;
position: relative;
z-index: -1;
-webkit-animation-name: bg_animation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: bg_animation;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: bg_animation;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes bg_animation {
0% { background-position: -840px 0; }
100% { background-position: 0 0; }
}
@-moz-keyframes bg_animation {
0% { background-position: -840px 0; }
100% { background-position: 0 0; }
}
@keyframes bg_animation {
0% { background-position: -840px 0; }
100% { background-position: 0 0; }
}