<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 id="animationentry"> <div id="crw_bg" class="animated-2 slideInLeft-2"> <img src="https://placeimg.com/640/480/any" class="animated slideInLeft" /> </div> </div>

body { margin: 0; padding: 0; } #animationentry { width: 100%; height: 700px; margin: 0; padding: 0; background: green; display: block; overflow: hidden; } #crw_bg { display: block; float: left; width: 50%; background: yellow; } .animated { -webkit-animation-duration: 1s; animation-duration:1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); transition: 0.7s ease; } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transition: 0.7s ease; } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } #crw_bg img { width: 100%; display: block; height: auto; } .animated-2 { -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInLeft-2 { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); transition: 0.7s ease; } } @keyframes slideInLeft-2 { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transition: 0.7s ease; } } .slideInLeft-2 { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; }