Animate BadgeCart

// Cart-Badge animation
.cart-badge {
  top:-13px;
  left:-8px;
  color: #fff;
  font-size: 1rem;
  background-color: chocolate;
  padding: 3px 5px;
  position:relative;
  border-radius:100px;
 }
.cart-badge:after,.cart-badge:before {
  content:"";
  width:100%;
  height:100%;
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
  -webkit-box-shadow:inset 0 0 20px 5px rgba(255,255,255,.4);
  box-shadow:inset 0 0 20px 5px rgba(255,255,255,.4)
 }
 .cart-badge:after {
  -webkit-animation:not-blink 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
  animation:not-blink 2.1s cubic-bezier(.65,.815,.735,.395) infinite
 }
 .cart-badge:before {
  -webkit-animation:not-blink 2.1s cubic-bezier(.165,.84,.44,1) infinite;
  animation:not-blink 2.1s cubic-bezier(.165,.84,.44,1) infinite;
  -webkit-animation-delay:1.15s;
  animation-delay:1.15s
 }

//No HTML
<ion-badge class="cart-badge">{{cartItems}}</ion-badge>