<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div id="autoanimatie"> <div class="container"> <div id="autootje"> <img class="img-fluid" src="./img/fruittruckanimatie.png" alt="fruittruck"> <span class="wiel links"></span> <span class="wiel rechts"></span> </div> </div> </div> </div>

/*ANIMATIE*/ #autoanimatie { margin-top: 100px; } #autootje { margin: 10% auto -25px; position: relative; width: 300px; -webkit-animation: autootje 15s infinite; animation: autootje 15s infinite; } #autootje img { width: 100%; animation: suspension 1s infinite; } #autootje .wiel { background: url("../img/wiel.png") no-repeat center center; background-size: 99% auto; display: block; width: 45px; height: 45px; position: absolute; bottom: -5px; -webkit-animation: spin 0.2s linear infinite; animation: spin 0.2s linear infinite; } .wiel.links { left: 32px; } .wiel.rechts { right: 32px; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @-webkit-keyframes autootje { 50% { -webkit-transform: translateX(10%); } 70% { -webkit-transform: translateX(-20%); } 100% { -webkit-transform: translateX(0%); } } @keyframes autootje { 50% { transform: translateX(10%); } 70% { transform: translateX(-20%); } 100% { transform: translateX(0%); } } @-webkit-keyframes suspension { 0% { -webkit-transform: translateY(1px); } 50% { -webkit-transform: translateY(3px); } 100% { -webkit-transform: translateY(1px); } } @keyframes suspension { 0% { transform: translateY(1px); } 50% { transform: translateY(3px); } 100% { transform: translateY(1px); } }