@mixin boomMixin {
  .boom {
    scale: 60;

    line {
      stroke: white;
      opacity: 0;
      animation-name: linesAnimation;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinity;
    }
  }
}

@mixin boomAnimationMixin {
  @keyframes linesAnimation {
    0% {
      opacity: 1;
      stroke-dashoffset: -12;
      stroke-dasharray: 1px 48px;
    }
    40% {
      stroke-dashoffset: -27;
      stroke-dasharray: 7px 48px;
    }
    99% {
      stroke-dashoffset: -38;
      stroke-dasharray: 0px 48px;
    }
    100% {
      opacity: 0;
    }
  }
}
