Generated by SassMeister.com.

input.scss

$width: -266px;
$cards: 10;
$delay: .8;

@keyframes PackageCarousel-background {
    @for $i from 0 through $cards {
        #{100% / $cards * $i} {
            background-position-x: $width * $i;
        }
        @if ((100% / $cards * $i + (100% / $cards * $delay)) <= 100%) {
            #{100% / $cards * $i + (100% / $cards * $delay)} {
                background-position-x: $width * $i;
            }
        }
    }
}

output.css

@keyframes PackageCarousel-background {
  0% {
    background-position-x: 0px;
  }
  8% {
    background-position-x: 0px;
  }
  10% {
    background-position-x: -266px;
  }
  18% {
    background-position-x: -266px;
  }
  20% {
    background-position-x: -532px;
  }
  28% {
    background-position-x: -532px;
  }
  30% {
    background-position-x: -798px;
  }
  38% {
    background-position-x: -798px;
  }
  40% {
    background-position-x: -1064px;
  }
  48% {
    background-position-x: -1064px;
  }
  50% {
    background-position-x: -1330px;
  }
  58% {
    background-position-x: -1330px;
  }
  60% {
    background-position-x: -1596px;
  }
  68% {
    background-position-x: -1596px;
  }
  70% {
    background-position-x: -1862px;
  }
  78% {
    background-position-x: -1862px;
  }
  80% {
    background-position-x: -2128px;
  }
  88% {
    background-position-x: -2128px;
  }
  90% {
    background-position-x: -2394px;
  }
  98% {
    background-position-x: -2394px;
  }
  100% {
    background-position-x: -2660px;
  }
}

settings.json

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