$block = ".spinner--robot";

$duration = 1.25s;
$delay = .3s;

$first-frame = 20%;
$second-frame = 45%;
$easeOutElastic = cubic-bezier(.175, .885, .32, 1.275); // @stylint ignore

{$block} {
  path:nth-child(1) {
    animation: cake-animation-1 $duration $easeOutElastic infinite;
  }

  path:nth-child(2) {
    animation: cake-animation-2 $duration $easeOutElastic infinite;
    animation-delay: $delay;
  }

  path:nth-child(3) {
    animation: cake-animation-3 $duration $easeOutElastic infinite;
    animation-delay: $delay * 2;
  }

  path:nth-child(4) {
    animation: cake-animation-4 $duration $easeOutElastic infinite;
    animation-delay: $delay * 3;
  }
}

@keyframes cake-animation-1 {
  0% { transform: translate(0, 0) }
  {$first-frame} { transform: translate(20px, -20px) }
  {$second-frame} { transform: translate(0, 0) }
  100% { transform: translate(0, 0) }
}

@keyframes cake-animation-2 {
  0% { transform: translate(0, 0) }
  {$first-frame} { transform: translate(20px, 0) }
  {$second-frame} { transform: translate(0, 0) }
  100% { transform: translate(0, 0) }
}

@keyframes cake-animation-3 {
  0% { transform: translate(0, 0) }
  {$first-frame} { transform: translate(20px, 20px) }
  {$second-frame} { transform: translate(0, 0) }
  100% { transform: translate(0, 0) }
}

@keyframes cake-animation-4 {
  0% { transform: translate(0, 0) }
  {$first-frame} { transform: translate(-20px, 0) }
  {$second-frame} { transform: translate(0, 0) }
  100% { transform: translate(0, 0) }
}