$block = ".spinner--fading";

$duration = 1.1s;
$delay = .25s;

$first-frame = 25%;
$second-frame = 50%;
$third-frame = 80%;
$easing = ease-in-out;

$min-opacity = .3;

{$block} {
  path:nth-child(1) {
    opacity: $min-opacity;
    animation: fading-cake-animation $duration $easing infinite;
  }

  path:nth-child(2) {
    opacity: $min-opacity;
    animation: fading-cake-animation $duration $easing infinite;
    animation-delay: $delay;
  }

  path:nth-child(3) {
    opacity: $min-opacity;
    animation: fading-cake-animation $duration $easing infinite;
    animation-delay: $delay * 2;
  }

  path:nth-child(4) {
    opacity: $min-opacity;
    animation: fading-cake-animation $duration $easing infinite;
    animation-delay: $delay * 3;
  }
}

@keyframes fading-cake-animation {
  0% { opacity: $min-opacity }
  {$first-frame} { opacity: .4 }
  {$second-frame} { opacity: 1 }
  {$third-frame} { opacity: .4 }
  100% { opacity: $min-opacity }
}