Car Moving Animation CSS3

*{ margin:0; padding:0;}
body { overflow:hidden; }
.wraper { width:800px; height:500px; border:1px solid #000; overflow:hidden; margin:0 auto; background:#333333; }
.img { border-radius:999px; animation:circle 4s linear infinite; -webkit-animation:circle 4s linear infinite; transition:transform 4s; -webkit-transition:transform 4s; }
@keyframes circle { 0% {transform:rotate(-360deg);} 100% {transform:rotate(0deg);} }
@-webkit-keyframes circle { 0% {transform:rotate(-360deg);} 100% {transform:rotate(0deg);} }
#clouds { padding:100px 0 0; background:#00aeff; background:-webkit-linear-gradient(top, #00aeff 0%, #fff 100%);
background:-linear-gradient(top, #00aeff 0%, #fff 100%); background:-moz-linear-gradient(top, #00aeff 0%, #fff 100%); }
.cloud { width:200px; height:60px; background:#fff; border-radius:200px; -moz-border-radius:200px; -webkit-border-radius:200px; position:relative; }
.cloud:before, .cloud:after { content:''; position:absolute; background:#fff; width:100px; height:80px; position:absolute; top:-15px; left:10px;
border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -webkit-transform:rotate(30deg); transform:rotate(30deg); -moz-transform:rotate(30deg); }
.cloud:after { width:120px; height:120px; top:-55px; left:auto; right:15px; }
.x1 { -webkit-animation:moveclouds 15s linear infinite; -moz-animation:moveclouds 15s linear infinite; -o-animation:moveclouds 15s linear infinite; }
.x2 { left:200px; -webkit-transform:scale(0.6); -moz-transform:scale(0.6); transform:scale(0.6); opacity:0.6;
-webkit-animation:moveclouds 25s linear infinite; -moz-animation:moveclouds 25s linear infinite; -o-animation:moveclouds 25s linear infinite; }
.x3 { left:-250px; top:-200px; -webkit-transform:scale(0.; -moz-transform:scale(0.; transform:scale(0.; opacity:0.8;
-webkit-animation:moveclouds 20s linear infinite; -moz-animation:moveclouds 20s linear infinite; -o-animation:moveclouds 20s linear infinite; }
.x4 { left:470px; top:-250px; -webkit-transform:scale(0.75); -moz-transform:scale(0.75); transform:scale(0.75); opacity:0.75;
-webkit-animation:moveclouds 18s linear infinite; -moz-animation:moveclouds 18s linear infinite; -o-animation:moveclouds 18s linear infinite; }
.x5 { left:-150px; top:-150px; -webkit-transform:scale(0.; -moz-transform:scale(0.; transform:scale(0.; opacity:0.8;
-webkit-animation:moveclouds 20s linear infinite; -moz-animation:moveclouds 20s linear infinite; -o-animation:moveclouds 20s linear infinite; }
@-webkit-keyframes moveclouds { 0% {margin-left:800px;} 100% {margin-left:-800px;} }
@-moz-keyframes moveclouds { 0% {margin-left:800px;} 100% {margin-left:-800px;} }
@-o-keyframes moveclouds { 0% {margin-left:800px;} 100% {margin-left:-800px;} }

<div class="wraper">
<div id="clouds"><div class="cloud x1"></div><div class="cloud x2"></div><div class="cloud x3"></div><div class="cloud x4"></div><div class="cloud x5"></div></div>
<div style="margin:-58px auto 0; width:600px; ">
<div style="margin-left:45px; float:left;"><img src="wheel.png" class="img"></div>
<div style="margin-left:280px; float:left;"><img src="wheel.png" class="img"></div>
</div>
</div>
<div style="margin-top:-290px; position:relative; left:400px; z-index:1000;"><img src="car.png"></div>

Tagged in:

• css3 animation
• car moving animation
• css3 car animation
• travel animation css3