Moving Car Animation with Javascript and CSS

In this post, we will be going through a simple moving car animation using only Javascript and CSS. We rotate wheels with CSS and move car using JavaScript.
Full Source Code :
<h2>Moving Car with JavaScript and CSS</h2> <style> body{ font-size:1.3em; } #wrapper{ color:blue; } .wheel{ display:inline-block; -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } </style> <div id="wrapper"> ____/*******************************\________<br> |________ <div class="wheel">@</div> _______________________ <div class="wheel">@</div> _______| </div> <script> var element = document.getElementById('wrapper'); var current_margin = 1; setInterval(function(){ if(window.innerWidth<=current_margin+100){ current_margin = 1; } new_margin = parseInt(current_margin)+1; current_margin = new_margin; element.style.marginLeft = new_margin; },15); </script>
Refer this video for full reference :