.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.40;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes ripple-md {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.60;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes ripple-sm {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.20;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes ripple-xs {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.10;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}



@keyframes vssurface {
  0% {
    transform: translateX(-100%)
  }

  50% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(100%)
  }
}

@keyframes vssurfaceBack {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(100%)
  }
}