<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 mt-4">
<div class="row justify-content-center">
<div class="col-6">
<div class="baseDiv redgradient rounded">
Cool Animation Effect
</div>
</div>
<div class="col-6">
<div class="baseDiv yellowgradient rounded">
Cool Animation Effect
</div>
</div>
</div>
</div>
.redgradient
{
background: #FF416C; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.yellowgradient
{
background: #FF8008; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFC837, #FF8008); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFC837, #FF8008); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.baseDiv
{
position:relative;
width: 500px;
height:300px;
padding-top: 70px;
padding-left: 30px;
color:white;
font-size: 40px;
text-align:center;
}
.baseDiv::after{
content: '';
position:absolute;
background: white;
right:100px;
top:-50px;
height: 100px;
width: 100px;
border: 1px solid white;
border-radius: 50%;
animation: EffectMove 2s alternate-reverse infinite;
}
@keyframes EffectMove {
from {
height: 100px;
width: 100px;
}
to {
height: 85px;
width: 85px;
}
}
