ripple effect keyframes

RippleKeyFrames.scss

// key frames
// ripple



@function number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if not (index(map-keys($numbers), $character) or $character == '.') {
      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
    }

    @if $character == '.' {
      $digits: 1;
    } @else if $digits == 0 {
      $result: $result * 10 + map-get($numbers, $character);
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }

  @return if($minus, -$result, $result);
}

@mixin ripple($scale) {
  transform:translate3d(-50%,-50%,0) scale(#{$scale});
}

.rippleIn {
  animation: rippleIn .6s ease-in-out forwards;
}

.rippleOut {
  animation: rippleOut .5s ease-in-out forwards;
}

@keyframes rippleIn {
  0% {
    @include ripple(1)
  }


 40% {
    @include ripple(2)
  }
  to {
    @include ripple(100)
  }
}

@keyframes rippleOut {
  0% {
    @include ripple(99)
  }
  1%{
    @include ripple(25)

  }
  5% {
    @include ripple(20)
  }
  80% {
    @include ripple(1)
  }
  to {
    @include ripple(0)
  }
}