Generated by SassMeister.com.

input.scss

$count: 8;

@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

@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
}