Generated by SassMeister.com.

input.scss

$count: 8;

#site-logo {

  g[id^="logo"] {
    opacity: 0;
    animation-duration: 8s;
    animation-timing-function: step-end;
    animation-direction: reverse; // The `g` elements are layered last-to-first based on their names
    animation-iteration-count: infinite;
    transition: none;
    
    @for $i  from 1 through $count {
      &:nth-of-type(#{$i}) {
        animation-name: logo#{$i};
      }
    }
  }
}

@for $i from 1 through $count {

  @keyframes logo#{$i} {
    @if $i != 1 {
      from {
        opacity: 0;
      }
    }

    #{(100% / $count) * $i  - (100 / $count)} {
      opacity: 1;
    }

    #{(100% / $count) * $i} {
      opacity: 0;
    }
  }
}

output.css

#site-logo g[id^=logo] {
  opacity: 0;
  animation-duration: 8s;
  animation-timing-function: step-end;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  transition: none;
}
#site-logo g[id^=logo]:nth-of-type(1) {
  animation-name: logo1;
}
#site-logo g[id^=logo]:nth-of-type(2) {
  animation-name: logo2;
}
#site-logo g[id^=logo]:nth-of-type(3) {
  animation-name: logo3;
}
#site-logo g[id^=logo]:nth-of-type(4) {
  animation-name: logo4;
}
#site-logo g[id^=logo]:nth-of-type(5) {
  animation-name: logo5;
}
#site-logo g[id^=logo]:nth-of-type(6) {
  animation-name: logo6;
}
#site-logo g[id^=logo]:nth-of-type(7) {
  animation-name: logo7;
}
#site-logo g[id^=logo]:nth-of-type(8) {
  animation-name: logo8;
}

@keyframes logo1 {
  0% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
}
@keyframes logo2 {
  from {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
@keyframes logo3 {
  from {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
}
@keyframes logo4 {
  from {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes logo5 {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 0;
  }
}
@keyframes logo6 {
  from {
    opacity: 0;
  }
  62.5% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes logo7 {
  from {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  87.5% {
    opacity: 0;
  }
}
@keyframes logo8 {
  from {
    opacity: 0;
  }
  87.5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}