<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 class="container-illu"> <img src="https://placeimg.com/640/480/nature" alt=""> </div>

.container-illu { height: 688px; position: relative; overflow: hidden; } .container-illu { right: 0px; } .container-illu:after { animation: slideIlluLeft 2s forwards; -webkit-animation: slideIlluLeft 2s forwards; } .container-illu:after { content: ''; position: absolute; top: 50%; left: 0px; height: 120%; width: 100%; background-color: #FFF; -webkit-transform: translateY(-50%)translateX(0%); -ms-transform: translateY(-50%)translateX(0%); transform: translateY(-50%)translateX(0%); } .container-illu img { height: 100%; } .container-illu:after { animation: slideIlluLeft 2s forwards; -webkit-animation: slideIlluLeft 2s forwards; } @keyframes slideIlluLeft { 0% { -webkit-transform: translateY(-50%)translateX(0%); transform: translateY(-50%)translateX(0%); -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140); } 50% { -webkit-transform: translateY(-50%)translateX(-50%) skewX(20deg); transform: translateY(-50%)translateX(-50%) skewX(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.815, 0.090, 0.885, 0.140); -webkit-transform: translateY(-50%)translateX(-100%); transform: translateY(-50%)translateX(-100%); } }