Css3 Animation looping in webkit-animation - html

Question

I have a problem with css3 animation effect.I want to know how to continue looping without go to start place.
As a example. when clouds are moving, the webkit-animation time over, it come to first step and start animate again.So it not nice because cloud go to back and again start moving (watch 7 seconds), i want to continue animation without cloud goes to start.
DEMO Here
CSS3
.sky {
height:638px;
background:#007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.moon {
background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
position:absolute;
left:0;
height:85%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_one {
margin-top: -55px;
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_one 5s linear infinite;
-moz-animation:cloud_one 5s linear infinite;
-o-animation:cloud_one 5s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_two {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_two 7s linear infinite;
-moz-animation:cloud_two 7s linear infinite;
-o-animation:cloud_two 7s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_three {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position:absolute;
left:0;
top:0;
height:75%;
width:400%;
-webkit-animation:cloud_three 10s linear infinite;
-moz-animation:cloud_three 10s linear infinite;
-o-animation:cloud_three 10s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
#-webkit-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#007fd5;
color:#007fd5
}
100% {
background:#007fd5;
color:#007fd5
}
}
#-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
#-webkit-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
#-webkit-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
#-webkit-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#000;
color:#a3d9ff
}
100% {
background:#007fd5;
color:#007fd5
}
}
#-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
#-moz-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
HTML
<div class="sky">
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>