@radius: 324px;
.animation {
  width: @radius;
  height: @radius;
}

.animation-circles {
  position: absolute;
  z-index: 1;
  width: @radius;
  height: @radius;
}
@bgColor: white;
@heart2Radius: 352px;
@heart2RadiusLarge: 384px;

@heart3Radius: 400px;
@heart3RadiusLarge: 430px;

@heart4Radius: 460px;
@heart4RadiusLarge: 480px;

@keyframes heartBeat2 {
  0% {
    width: @heart2Radius;
    height: @heart2Radius;

  }

  50% {
    width: @heart2RadiusLarge;
    height: @heart2RadiusLarge;

  }

  100% {
    width: @heart2Radius;
    height: @heart2Radius;

  }
}

@keyframes heartBeat3 {
  0% {
    width: @heart3Radius;
    height: @heart3Radius;

  }

  50% {
    width: @heart3RadiusLarge;
    height: @heart3RadiusLarge;

  }

  100% {
    width: @heart3Radius;
    height: @heart3Radius;

  }
}

@keyframes heartBeat4 {
  0% {
    width: @heart4Radius;
    height: @heart4Radius;

  }

  50% {
    width: @heart4RadiusLarge;
    height: @heart4RadiusLarge;

  }

  100% {
    width: @heart4Radius;
    height: @heart4Radius;

  }
}

// 0s-1s-2s 内圈352px - 384px - 352px
// 0s-1.1s-2.1s   中圈 450px - 491px - 450px
// 0s-1.2s-2.2s  外圈 590px - 644px - 590px


.actived {
  .heartBeat {
    animation-name: heartBeat;
    animation-duration: .2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .heartBeat2 {
    animation-name: heartBeat2;
    animation-duration: .5s;
  }

  .heartBeat3 {
    animation-name: heartBeat3;
    animation-delay: .2s;
    animation-duration: .5s;
  }

  .heartBeat4 {
    animation-name: heartBeat4;
    animation-delay: .3s;
    animation-duration: .5s;
  }
}

.animation-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  border-radius: 100%;
  // backdrop-filter: blur(10px);
  background-color: rgba(@bgColor, .1);

  &.circle-4 {
    z-index: 1;
    width: @heart4Radius;
    transform: translate(-50%, -50%);
    // margin-top: -@heart4Radius *.5;
    // margin-left: -@heart4Radius *.5;
    width: @heart4Radius;
    height: @heart4Radius;
    background-color: rgba(@bgColor, .1);
  }

  &.circle-3 {
    z-index: 2;
    transform: translate(-50%, -50%);
    width: @heart3Radius;
    height: @heart3Radius;
    background-color: rgba(@bgColor, .2);
  }

  &.circle-2 {
    z-index: 3;
    transform: translate(-50%, -50%);
    width: @heart2Radius;
    height: @heart2Radius;
    background-color: rgba(@bgColor, .2);
  }
}