<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="sky"> <img class="cloud" src="http://images.clipartpanda.com/clouds-background-png-CloudImage.png" alt="cloud"> <img class="cloud" src="http://images.clipartpanda.com/clouds-background-png-CloudImage.png" alt="cloud"> </div> <div class="grass"></div> <div class="road"> <div class="lines"></div> <img src="https://forum.imguol.com/avatars/gallery/noticias/Gifs%20Animados%2006/animados298.gif" class="mario" /> <img src="https://forum.imguol.com/avatars/gallery/noticias/Gifs%20Animados%2006/animados298.gif" alt="luigi" class="luigi" /> </div>

/*// BASE STYLES //*/ html, body{ height: 100%; width:100%; overflow: hidden; margin: 0; } .grass, .sky, .road{ position: relative; } .sky{ height: 40%; background: skyblue; } .grass{ height: 30%; background: seagreen; } .road{ height: 30%; background: dimgrey; box-sizing: border-box; border-top: 10px solid grey; border-bottom: 10px solid grey; width: 100%; } .lines{ box-sizing: border-box; border: 5px dashed #fff; height: 0px; width: 100%; position: absolute; top: 45%; } /*// ELEMENTS TO ANIMATE //*/ .mario{ position: absolute; left: 0; top: -40px; animation: drive 3s both infinite linear, jump 0.5s .9s ease; /* animation-name: drive; animation-duration: 3s; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-delay: 1s; animation-timing-function: cubic-bezier(0,.78,.98,.23); animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: linear; */ } .luigi{ position: absolute; left: 0; top: 100px; animation-name: drive; animation-duration: 5s; /* animation-fill-mode: forwards; animation-fill-mode: backwards; animation-delay: 1s; animation-direction: reverse; */ animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: linear; } .cloud{ position: absolute; } .cloud:nth-child(1){ width: 200px; opacity: .5; top: 120px; animation: wind 80s linear infinite reverse; } .cloud:nth-child(2){ width: 300px; top: 0; animation: wind 50s linear infinite reverse; } /*// KEYFRAMES //*/ @keyframes drive{ from{ transform: translateX(-200px); } to{ transform: translateX(2000px); } } @keyframes wind{ from{ left: -300px; } to{ left: 100%; } } @keyframes jump{ 0%{ top: -40px } 50%{ top: -300px; } 100%{ top: -40px; } }