<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"> <h2 style="text-align:center">Animation by <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2> <p style="text-align:center">creativemk22@gmail.com</p> <hr> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="work_area"> <div class="work_object-1"></div> <div class="work_object-2"></div> <div class="work_object-3"></div> <div class="work_object-4"></div> </div> </div> <div class="col-md-4"></div> </div> </div>

.work_area{width:100%;float:left;background:#fff;height:200px;border:5px solid #000;box-shadow:0 0 10px #000;position:relative;background-image:url("https://auto.ndtvimg.com/bike-images/big/royal-enfield/thunderbird-500x/royal-enfield-thunderbird-500x.jpg?v=6");background-position:center;background-size:cover;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);} .work_object-1{animation: my_anm1 5s linear infinite;background:rgba(0,0,0,0.8);width:100%;height:50px;position:absolute;left:0;bottom:0;box-shadow:inset 0 0 10px #000;} .work_object-2{animation: my_anm2 5s linear infinite;background:transparent;width:100%;height:5px;position:absolute;right:0;order-radius:50%;border-top:3px dashed #fff;bottom:9%;} .work_object-3{animation: my_anm3 5s linear infinite;background:#000;width:80px;height:80px;position:absolute;left:15%;bottom:7%;border-radius:50%;border:10px dashed #ccc;box-shadow:0 0 5px #000,inset 0 0 5px #fff;} .work_object-4{animation: my_anm4 5s linear infinite;background:#000;width:80px;height:80px;position:absolute;right:13%;bottom:7%;border-radius:50%;border:10px dashed #ccc;box-shadow:0 0 5px #000,inset 0 0 5px #fff;} @keyframes my_anm{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} } @keyframes my_anm2{ from{transform:translateX(100%)} to{transform:translateX(-10%)} } @keyframes my_anm3{ from{transform:rotate(-360deg)} to{transform:rotate(360deg)} } @keyframes my_anm4{ from{transform:rotate(-360deg)} to{transform:rotate(360deg)} }