Colorwheel generated animation steps with for loop

SassMeister-input-HTML.html

<div class="box"></div>

SassMeister-input.scss

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

$start-color: red;

// Also try with this:
// $start-color: #004011;

.box {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  -webkit-animation: colorwheel 5s infinite;
  background: $start-color;
}

@-webkit-keyframes colorwheel {
  $step: 100/360; /*! step = #{$step} */
  @for $i from 0 through 360 {
  	$degree: $i * $step;
  	#{$degree}% {
  		background: adjust-hue($start-color, $i)
  	}
	}
}

SassMeister-output.css

.box {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  -webkit-animation: colorwheel 5s infinite;
  background: red;
}

@-webkit-keyframes colorwheel {
  /*! step = 0.27778 */
  0% {
    background: red;
  }
  0.27778% {
    background: #ff0400;
  }
  0.55556% {
    background: #ff0900;
  }
  0.83333% {
    background: #ff0d00;
  }
  1.11111% {
    background: #ff1100;
  }
  1.38889% {
    background: #ff1500;
  }
  1.66667% {
    background: #ff1a00;
  }
  1.94444% {
    background: #ff1e00;
  }
  2.22222% {
    background: #ff2200;
  }
  2.5% {
    background: #ff2600;
  }
  2.77778% {
    background: #ff2b00;
  }
  3.05556% {
    background: #ff2f00;
  }
  3.33333% {
    background: #ff3300;
  }
  3.61111% {
    background: #ff3700;
  }
  3.88889% {
    background: #ff3c00;
  }
  4.16667% {
    background: #ff4000;
  }
  4.44444% {
    background: #ff4400;
  }
  4.72222% {
    background: #ff4800;
  }
  5% {
    background: #ff4d00;
  }
  5.27778% {
    background: #ff5100;
  }
  5.55556% {
    background: #ff5500;
  }
  5.83333% {
    background: #ff5900;
  }
  6.11111% {
    background: #ff5e00;
  }
  6.38889% {
    background: #ff6200;
  }
  6.66667% {
    background: #ff6600;
  }
  6.94444% {
    background: #ff6a00;
  }
  7.22222% {
    background: #ff6e00;
  }
  7.5% {
    background: #ff7300;
  }
  7.77778% {
    background: #ff7700;
  }
  8.05556% {
    background: #ff7b00;
  }
  8.33333% {
    background: #ff8000;
  }
  8.61111% {
    background: #ff8400;
  }
  8.88889% {
    background: #ff8800;
  }
  9.16667% {
    background: darkorange;
  }
  9.44444% {
    background: #ff9100;
  }
  9.72222% {
    background: #ff9500;
  }
  10% {
    background: #ff9900;
  }
  10.27778% {
    background: #ff9d00;
  }
  10.55556% {
    background: #ffa200;
  }
  10.83333% {
    background: #ffa600;
  }
  11.11111% {
    background: #ffaa00;
  }
  11.38889% {
    background: #ffae00;
  }
  11.66667% {
    background: #ffb300;
  }
  11.94444% {
    background: #ffb700;
  }
  12.22222% {
    background: #ffbb00;
  }
  12.5% {
    background: #ffbf00;
  }
  12.77778% {
    background: #ffc300;
  }
  13.05556% {
    background: #ffc800;
  }
  13.33333% {
    background: #ffcc00;
  }
  13.61111% {
    background: #ffd000;
  }
  13.88889% {
    background: #ffd500;
  }
  14.16667% {
    background: #ffd900;
  }
  14.44444% {
    background: #ffdd00;
  }
  14.72222% {
    background: #ffe100;
  }
  15% {
    background: #ffe500;
  }
  15.27778% {
    background: #ffea00;
  }
  15.55556% {
    background: #ffee00;
  }
  15.83333% {
    background: #fff200;
  }
  16.11111% {
    background: #fff700;
  }
  16.38889% {
    background: #fffb00;
  }
  16.66667% {
    background: yellow;
  }
  16.94444% {
    background: #fbff00;
  }
  17.22222% {
    background: #f6ff00;
  }
  17.5% {
    background: #f2ff00;
  }
  17.77778% {
    background: #eeff00;
  }
  18.05556% {
    background: #eaff00;
  }
  18.33333% {
    background: #e6ff00;
  }
  18.61111% {
    background: #e1ff00;
  }
  18.88889% {
    background: #ddff00;
  }
  19.16667% {
    background: #d9ff00;
  }
  19.44444% {
    background: #d4ff00;
  }
  19.72222% {
    background: #d0ff00;
  }
  20% {
    background: #ccff00;
  }
  20.27778% {
    background: #c8ff00;
  }
  20.55556% {
    background: #c3ff00;
  }
  20.83333% {
    background: #bfff00;
  }
  21.11111% {
    background: #bbff00;
  }
  21.38889% {
    background: #b7ff00;
  }
  21.66667% {
    background: #b2ff00;
  }
  21.94444% {
    background: #aeff00;
  }
  22.22222% {
    background: #aaff00;
  }
  22.5% {
    background: #a6ff00;
  }
  22.77778% {
    background: #a1ff00;
  }
  23.05556% {
    background: #9dff00;
  }
  23.33333% {
    background: #99ff00;
  }
  23.61111% {
    background: #95ff00;
  }
  23.88889% {
    background: #91ff00;
  }
  24.16667% {
    background: #8cff00;
  }
  24.44444% {
    background: #88ff00;
  }
  24.72222% {
    background: #84ff00;
  }
  25% {
    background: #80ff00;
  }
  25.27778% {
    background: #7bff00;
  }
  25.55556% {
    background: #77ff00;
  }
  25.83333% {
    background: #73ff00;
  }
  26.11111% {
    background: #6eff00;
  }
  26.38889% {
    background: #6aff00;
  }
  26.66667% {
    background: #66ff00;
  }
  26.94444% {
    background: #62ff00;
  }
  27.22222% {
    background: #5eff00;
  }
  27.5% {
    background: #59ff00;
  }
  27.77778% {
    background: #55ff00;
  }
  28.05556% {
    background: #51ff00;
  }
  28.33333% {
    background: #4cff00;
  }
  28.61111% {
    background: #48ff00;
  }
  28.88889% {
    background: #44ff00;
  }
  29.16667% {
    background: #40ff00;
  }
  29.44444% {
    background: #3bff00;
  }
  29.72222% {
    background: #37ff00;
  }
  30% {
    background: #33ff00;
  }
  30.27778% {
    background: #2fff00;
  }
  30.55556% {
    background: #2bff00;
  }
  30.83333% {
    background: #26ff00;
  }
  31.11111% {
    background: #22ff00;
  }
  31.38889% {
    background: #1eff00;
  }
  31.66667% {
    background: #1aff00;
  }
  31.94444% {
    background: #15ff00;
  }
  32.22222% {
    background: #11ff00;
  }
  32.5% {
    background: #0dff00;
  }
  32.77778% {
    background: #08ff00;
  }
  33.05556% {
    background: #04ff00;
  }
  33.33333% {
    background: lime;
  }
  33.61111% {
    background: #00ff04;
  }
  33.88889% {
    background: #00ff09;
  }
  34.16667% {
    background: #00ff0d;
  }
  34.44444% {
    background: #00ff11;
  }
  34.72222% {
    background: #00ff15;
  }
  35% {
    background: #00ff19;
  }
  35.27778% {
    background: #00ff1e;
  }
  35.55556% {
    background: #00ff22;
  }
  35.83333% {
    background: #00ff26;
  }
  36.11111% {
    background: #00ff2b;
  }
  36.38889% {
    background: #00ff2f;
  }
  36.66667% {
    background: #00ff33;
  }
  36.94444% {
    background: #00ff37;
  }
  37.22222% {
    background: #00ff3c;
  }
  37.5% {
    background: #00ff40;
  }
  37.77778% {
    background: #00ff44;
  }
  38.05556% {
    background: #00ff48;
  }
  38.33333% {
    background: #00ff4d;
  }
  38.61111% {
    background: #00ff51;
  }
  38.88889% {
    background: #00ff55;
  }
  39.16667% {
    background: #00ff59;
  }
  39.44444% {
    background: #00ff5e;
  }
  39.72222% {
    background: #00ff62;
  }
  40% {
    background: #00ff66;
  }
  40.27778% {
    background: #00ff6a;
  }
  40.55556% {
    background: #00ff6f;
  }
  40.83333% {
    background: #00ff73;
  }
  41.11111% {
    background: #00ff77;
  }
  41.38889% {
    background: #00ff7b;
  }
  41.66667% {
    background: #00ff80;
  }
  41.94444% {
    background: #00ff84;
  }
  42.22222% {
    background: #00ff88;
  }
  42.5% {
    background: #00ff8c;
  }
  42.77778% {
    background: #00ff91;
  }
  43.05556% {
    background: #00ff95;
  }
  43.33333% {
    background: #00ff99;
  }
  43.61111% {
    background: #00ff9d;
  }
  43.88889% {
    background: #00ffa2;
  }
  44.16667% {
    background: #00ffa6;
  }
  44.44444% {
    background: #00ffaa;
  }
  44.72222% {
    background: #00ffae;
  }
  45% {
    background: #00ffb3;
  }
  45.27778% {
    background: #00ffb7;
  }
  45.55556% {
    background: #00ffbb;
  }
  45.83333% {
    background: #00ffbf;
  }
  46.11111% {
    background: #00ffc4;
  }
  46.38889% {
    background: #00ffc8;
  }
  46.66667% {
    background: #00ffcc;
  }
  46.94444% {
    background: #00ffd0;
  }
  47.22222% {
    background: #00ffd5;
  }
  47.5% {
    background: #00ffd9;
  }
  47.77778% {
    background: #00ffdd;
  }
  48.05556% {
    background: #00ffe1;
  }
  48.33333% {
    background: #00ffe6;
  }
  48.61111% {
    background: #00ffea;
  }
  48.88889% {
    background: #00ffee;
  }
  49.16667% {
    background: #00fff2;
  }
  49.44444% {
    background: #00fff7;
  }
  49.72222% {
    background: #00fffb;
  }
  50% {
    background: cyan;
  }
  50.27778% {
    background: #00fbff;
  }
  50.55556% {
    background: #00f6ff;
  }
  50.83333% {
    background: #00f2ff;
  }
  51.11111% {
    background: #00eeff;
  }
  51.38889% {
    background: #00eaff;
  }
  51.66667% {
    background: #00e5ff;
  }
  51.94444% {
    background: #00e1ff;
  }
  52.22222% {
    background: #00ddff;
  }
  52.5% {
    background: #00d9ff;
  }
  52.77778% {
    background: #00d4ff;
  }
  53.05556% {
    background: #00d0ff;
  }
  53.33333% {
    background: #00ccff;
  }
  53.61111% {
    background: #00c8ff;
  }
  53.88889% {
    background: #00c3ff;
  }
  54.16667% {
    background: deepskyblue;
  }
  54.44444% {
    background: #00bbff;
  }
  54.72222% {
    background: #00b7ff;
  }
  55% {
    background: #00b2ff;
  }
  55.27778% {
    background: #00aeff;
  }
  55.55556% {
    background: #00aaff;
  }
  55.83333% {
    background: #00a6ff;
  }
  56.11111% {
    background: #00a1ff;
  }
  56.38889% {
    background: #009dff;
  }
  56.66667% {
    background: #0099ff;
  }
  56.94444% {
    background: #0095ff;
  }
  57.22222% {
    background: #0091ff;
  }
  57.5% {
    background: #008cff;
  }
  57.77778% {
    background: #0088ff;
  }
  58.05556% {
    background: #0084ff;
  }
  58.33333% {
    background: #007fff;
  }
  58.61111% {
    background: #007bff;
  }
  58.88889% {
    background: #0077ff;
  }
  59.16667% {
    background: #0073ff;
  }
  59.44444% {
    background: #006eff;
  }
  59.72222% {
    background: #006aff;
  }
  60% {
    background: #0066ff;
  }
  60.27778% {
    background: #0062ff;
  }
  60.55556% {
    background: #005eff;
  }
  60.83333% {
    background: #0059ff;
  }
  61.11111% {
    background: #0055ff;
  }
  61.38889% {
    background: #0051ff;
  }
  61.66667% {
    background: #004cff;
  }
  61.94444% {
    background: #0048ff;
  }
  62.22222% {
    background: #0044ff;
  }
  62.5% {
    background: #0040ff;
  }
  62.77778% {
    background: #003bff;
  }
  63.05556% {
    background: #0037ff;
  }
  63.33333% {
    background: #0033ff;
  }
  63.61111% {
    background: #002fff;
  }
  63.88889% {
    background: #002bff;
  }
  64.16667% {
    background: #0026ff;
  }
  64.44444% {
    background: #0022ff;
  }
  64.72222% {
    background: #001eff;
  }
  65% {
    background: #0019ff;
  }
  65.27778% {
    background: #0015ff;
  }
  65.55556% {
    background: #0011ff;
  }
  65.83333% {
    background: #000dff;
  }
  66.11111% {
    background: #0008ff;
  }
  66.38889% {
    background: #0004ff;
  }
  66.66667% {
    background: blue;
  }
  66.94444% {
    background: #0400ff;
  }
  67.22222% {
    background: #0800ff;
  }
  67.5% {
    background: #0d00ff;
  }
  67.77778% {
    background: #1100ff;
  }
  68.05556% {
    background: #1500ff;
  }
  68.33333% {
    background: #1900ff;
  }
  68.61111% {
    background: #1e00ff;
  }
  68.88889% {
    background: #2200ff;
  }
  69.16667% {
    background: #2600ff;
  }
  69.44444% {
    background: #2a00ff;
  }
  69.72222% {
    background: #2f00ff;
  }
  70% {
    background: #3300ff;
  }
  70.27778% {
    background: #3700ff;
  }
  70.55556% {
    background: #3c00ff;
  }
  70.83333% {
    background: #4000ff;
  }
  71.11111% {
    background: #4400ff;
  }
  71.38889% {
    background: #4800ff;
  }
  71.66667% {
    background: #4d00ff;
  }
  71.94444% {
    background: #5100ff;
  }
  72.22222% {
    background: #5500ff;
  }
  72.5% {
    background: #5900ff;
  }
  72.77778% {
    background: #5e00ff;
  }
  73.05556% {
    background: #6200ff;
  }
  73.33333% {
    background: #6600ff;
  }
  73.61111% {
    background: #6a00ff;
  }
  73.88889% {
    background: #6e00ff;
  }
  74.16667% {
    background: #7300ff;
  }
  74.44444% {
    background: #7700ff;
  }
  74.72222% {
    background: #7b00ff;
  }
  75% {
    background: #7f00ff;
  }
  75.27778% {
    background: #8400ff;
  }
  75.55556% {
    background: #8800ff;
  }
  75.83333% {
    background: #8c00ff;
  }
  76.11111% {
    background: #9000ff;
  }
  76.38889% {
    background: #9500ff;
  }
  76.66667% {
    background: #9900ff;
  }
  76.94444% {
    background: #9d00ff;
  }
  77.22222% {
    background: #a200ff;
  }
  77.5% {
    background: #a600ff;
  }
  77.77778% {
    background: #aa00ff;
  }
  78.05556% {
    background: #ae00ff;
  }
  78.33333% {
    background: #b300ff;
  }
  78.61111% {
    background: #b700ff;
  }
  78.88889% {
    background: #bb00ff;
  }
  79.16667% {
    background: #bf00ff;
  }
  79.44444% {
    background: #c300ff;
  }
  79.72222% {
    background: #c800ff;
  }
  80% {
    background: #cc00ff;
  }
  80.27778% {
    background: #d000ff;
  }
  80.55556% {
    background: #d400ff;
  }
  80.83333% {
    background: #d900ff;
  }
  81.11111% {
    background: #dd00ff;
  }
  81.38889% {
    background: #e100ff;
  }
  81.66667% {
    background: #e500ff;
  }
  81.94444% {
    background: #ea00ff;
  }
  82.22222% {
    background: #ee00ff;
  }
  82.5% {
    background: #f200ff;
  }
  82.77778% {
    background: #f600ff;
  }
  83.05556% {
    background: #fb00ff;
  }
  83.33333% {
    background: magenta;
  }
  83.61111% {
    background: #ff00fb;
  }
  83.88889% {
    background: #ff00f6;
  }
  84.16667% {
    background: #ff00f2;
  }
  84.44444% {
    background: #ff00ee;
  }
  84.72222% {
    background: #ff00ea;
  }
  85% {
    background: #ff00e6;
  }
  85.27778% {
    background: #ff00e1;
  }
  85.55556% {
    background: #ff00dd;
  }
  85.83333% {
    background: #ff00d9;
  }
  86.11111% {
    background: #ff00d4;
  }
  86.38889% {
    background: #ff00d0;
  }
  86.66667% {
    background: #ff00cc;
  }
  86.94444% {
    background: #ff00c8;
  }
  87.22222% {
    background: #ff00c3;
  }
  87.5% {
    background: #ff00bf;
  }
  87.77778% {
    background: #ff00bb;
  }
  88.05556% {
    background: #ff00b7;
  }
  88.33333% {
    background: #ff00b2;
  }
  88.61111% {
    background: #ff00ae;
  }
  88.88889% {
    background: #ff00aa;
  }
  89.16667% {
    background: #ff00a6;
  }
  89.44444% {
    background: #ff00a1;
  }
  89.72222% {
    background: #ff009d;
  }
  90% {
    background: #ff0099;
  }
  90.27778% {
    background: #ff0095;
  }
  90.55556% {
    background: #ff0091;
  }
  90.83333% {
    background: #ff008c;
  }
  91.11111% {
    background: #ff0088;
  }
  91.38889% {
    background: #ff0084;
  }
  91.66667% {
    background: #ff0080;
  }
  91.94444% {
    background: #ff007b;
  }
  92.22222% {
    background: #ff0077;
  }
  92.5% {
    background: #ff0073;
  }
  92.77778% {
    background: #ff006e;
  }
  93.05556% {
    background: #ff006a;
  }
  93.33333% {
    background: #ff0066;
  }
  93.61111% {
    background: #ff0062;
  }
  93.88889% {
    background: #ff005d;
  }
  94.16667% {
    background: #ff0059;
  }
  94.44444% {
    background: #ff0055;
  }
  94.72222% {
    background: #ff0051;
  }
  95% {
    background: #ff004c;
  }
  95.27778% {
    background: #ff0048;
  }
  95.55556% {
    background: #ff0044;
  }
  95.83333% {
    background: #ff0040;
  }
  96.11111% {
    background: #ff003b;
  }
  96.38889% {
    background: #ff0037;
  }
  96.66667% {
    background: #ff0033;
  }
  96.94444% {
    background: #ff002f;
  }
  97.22222% {
    background: #ff002b;
  }
  97.5% {
    background: #ff0026;
  }
  97.77778% {
    background: #ff0022;
  }
  98.05556% {
    background: #ff001e;
  }
  98.33333% {
    background: #ff001a;
  }
  98.61111% {
    background: #ff0015;
  }
  98.88889% {
    background: #ff0011;
  }
  99.16667% {
    background: #ff000d;
  }
  99.44444% {
    background: #ff0008;
  }
  99.72222% {
    background: #ff0004;
  }
  100% {
    background: red;
  }
}

SassMeister-rendered.html

<div class="box"></div>