<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="notify"> <span class="heartbit"></span> <span class="point"></span> </div>

.notify { position: relative; top: 50px; left: -100px; } .notify .heartbit { position: absolute; top: -20px; right: -4px; height: 25px; width: 25px; z-index: 10; border: 5px solid #fc4b6c; border-radius: 70px; -moz-animation: heartbit 1s ease-out; -moz-animation-iteration-count: infinite; -o-animation: heartbit 1s ease-out; -o-animation-iteration-count: infinite; -webkit-animation: heartbit 1s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .notify .point { width: 6px; height: 6px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: #fc4b6c; position: absolute; right: 6px; top: -10px; } @-moz-keyframes heartbit { 0% { -moz-transform: scale(0); opacity: 0.0 } 25% { -moz-transform: scale(0.1); opacity: 0.1 } 50% { -moz-transform: scale(0.5); opacity: 0.3 } 75% { -moz-transform: scale(0.8); opacity: 0.5 } to { -moz-transform: scale(1); opacity: 0.0 } } @-webkit-keyframes heartbit { 0% { -webkit-transform: scale(0); opacity: 0.0 } 25% { -webkit-transform: scale(0.1); opacity: 0.1 } 50% { -webkit-transform: scale(0.5); opacity: 0.3 } 75% { -webkit-transform: scale(0.8); opacity: 0.5 } to { -webkit-transform: scale(1); opacity: 0.0 } }