Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.m-signin__logo {
  $delays: ();
  @for $i from 7 through 14 {
    $selector: "& .shape-#{$i}";
    $delay: ($selector: 0.1s + ($i - 7s)/10);
    $delays: map-merge($delays, $delay);
  }
  #{map-keys($delays)} {
    animation: logo-fade-in-2 500ms ease-in-out;
    animation-fill-mode: forwards;
    opacity: 0;
    transform-origin: 50%;
  }
  @each $delay in $delays {
    #{nth($delay, 1)} {
      animation-delay: nth($delay, 2);
    }
  }
}

SassMeister-output.css

.m-signin__logo .shape-7, .m-signin__logo .shape-8, .m-signin__logo .shape-9, .m-signin__logo .shape-10, .m-signin__logo .shape-11, .m-signin__logo .shape-12, .m-signin__logo .shape-13, .m-signin__logo .shape-14 {
  animation: logo-fade-in-2 500ms ease-in-out;
  animation-fill-mode: forwards;
  opacity: 0;
  transform-origin: 50%;
}
.m-signin__logo .shape-7 {
  animation-delay: 0.1s;
}
.m-signin__logo .shape-8 {
  animation-delay: 0.2s;
}
.m-signin__logo .shape-9 {
  animation-delay: 0.3s;
}
.m-signin__logo .shape-10 {
  animation-delay: 0.4s;
}
.m-signin__logo .shape-11 {
  animation-delay: 0.5s;
}
.m-signin__logo .shape-12 {
  animation-delay: 0.6s;
}
.m-signin__logo .shape-13 {
  animation-delay: 0.7s;
}
.m-signin__logo .shape-14 {
  animation-delay: 0.8s;
}