$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;
  }
}