html - Css3 Animation looping in webkit-animation -

i have problem css3 animation effect.i want know how continue looping without go start place. example. when clouds moving, webkit-animation time over, come first step , start animate again.so not nice because cloud go , again start moving (watch 7 seconds), want continue animation without cloud goes 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>