Skip to content

Instantly share code, notes, and snippets.

@AdmireNL

AdmireNL/SassMeister-input-HTML.html

Last active August 29, 2015 14:09
Show Gist options
  • Save AdmireNL/a370b0159b1f77f23452 to your computer and use it in GitHub Desktop.
Save AdmireNL/a370b0159b1f77f23452 to your computer and use it in GitHub Desktop.
Download ZIP
Colorwheel generated animation steps with for loop
Raw
SassMeister-input-HTML.html
<div class="box"></div>
Raw
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)
}
}
}
Raw
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;
}
}
Raw
SassMeister-rendered.html
<div class="box"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment