Skip to content

Instantly share code, notes, and snippets.

@dwcullop

dwcullop/CreateCSS.js

Last active August 7, 2016 23:15
Show Gist options
  • Save dwcullop/f81ffaba522d26f82148b79f560a6b3c to your computer and use it in GitHub Desktop.
Save dwcullop/f81ffaba522d26f82148b79f560a6b3c to your computer and use it in GitHub Desktop.
Download ZIP
CSS Keyframes for animating using perfect rainbows by cycling through all of the colors on the color wheel in 12 steps of 30 degrees each. It has 3 sets of colors (normal, darker, and lighter) and shows how to animate text color and shadow. See it in action here: http://codepen.io/dwcullop/full/XKPvZQ/
Raw
CreateCSS.js
// Quick and Dirty file for generating Rainbowized CSS scripts
// This could be done with a CSS pre-parser like SCSS or LESS or whatever, but
// for now, it is what it is.
function units(n, units) {
n = parseInt(n);
return n ? n.toString() + units : 0;
}
function unitsF(n, units, digits) {
digits = (digits === undefined) ? 3 : digits;
n = parseFloat(n);
return n ? n.toFixed(digits) + units : 0;
}
function em(n) {
return unitsF(n, "em");
}
function px(n) {
return units(n, "px");
}
function decimal(n) {
return unitsF(n, "");
}
function int(n) {
return units(n, "");
}
function pct(n, digits) {
return unitsF(n * 100, "%", digits);
}
function pct0(n) {
return pct(n, 0);
}
function Steps(count) {
this.count = count;
this.stepSize = 1.0 / this.count;
this.vals = [];
for (var i = 0; i < this.count; ++i) {
this.vals.push(i * this.stepSize);
}
function _scale(arr, s, e, u) {
var res;
if ((s !== undefined) && (e !== undefined)) {
res = arr.map(function(v) {
return ((e - s) * v) + s;
});
} else if (s !== undefined) {
res = arr.map(function(v) {
return s * v;
});
}
return u ? res.map(u) : res;
}
this.scale = function(s, e, u) {
return _scale(this.vals, s, e, u);
}
this.scaleSin = function(s, e, u, cycles) {
cycles = cycles || 1;
var arr = this.vals.map(function(v) {
return Math.sin((((360 * cycles) * v) * Math.PI) / 360);
})
return _scale(arr, s, e, u);
}
}
function outputPercent(p) {
if (p === 0) {
return "0%, 100%";
}
return pct(p);
}
function makeRainbowFuzz() {
var fixedBorders = ["0.05em 0.05em 0.1em rgba(0,0,0,1)", "0 0 1px rgb(0,0,0)", "0 0 3px rgb(255,255,255)"];
var steps = new Steps(12);
var extras = steps.scaleSin(0.8, 0.4);
var lightness = steps.scaleSin(0.25, 0.75, pct0);
var hue = steps.scale(0, 360);
var spread = steps.scaleSin(0.25, 1.5);
function frameFuzz(num) {
var frame = new Steps(36);
// var extra = alt(num, 0.8, 0.4);
// var lightness = alt(num, 0.35, 0.65, pct0);
// var frameSpread = frame.scale(0.5, 2.0).map(function(x) {
// return (x + spread[num]);
// })
// .map(em);
var frameSpread = frame.scale(0.25, spread[num], em);
var alpha = frame.scale(0.9, 1.0, decimal);
var frameHue = frame.scale(0, 360).map(function(x) {
return (x + hue[num]) % 360;
}).map(int);
var offsetH = "0";
var offsetV = "0";
var output = frame.vals.map(function(val, n) {
var hsl = "hsla(" + frameHue[n] + ", 100%, " + lightness[num] + ", " + alpha[n] + ")";
//var o = scale(n, 0, 0.1*num, em);
return [offsetH, offsetV, frameSpread[n], hsl].join(" ");
});
return "{\r\n\ttext-shadow: " + fixedBorders.concat(output).join(",\r\n\t\t\t") + ";\r\n\t}";
}
var output = steps.vals.map(function(v, i) {
return [outputPercent(v) + " " + frameFuzz(i)];
});
return ("@keyframes kfRainbowFuzz {\r\n" + output.join("\r\n\r\n") + "\r\n}");
}
function makeRainbowStacked() {
var fixedBorders = ["0.05em 0.05em 0.1em rgba(0,0,0,1)", "0 0 1px rgb(0,0,0)", "0 0 3px rgb(255,255,255)"];
var steps = new Steps(12);
//var extras = steps.scaleSin(0.8, 0.4);
//var lightness = steps.scaleSin(0.25, 0.75, pct0);
var hue = steps.scale(0, 360);
var spread = steps.scaleSin(0.25, 1.5);
function frameStack(num) {
var frame = new Steps(12);
// var extra = alt(num, 0.8, 0.4);
// var lightness = alt(num, 0.35, 0.65, pct0);
// var frameSpread = frame.scale(0.5, 2.0).map(function(x) {
// return (x + spread[num]);
// })
// .map(em);
var frameSpread = frame.scale(4, 6, px);
var alpha = frame.scale(0.9, 1.0, decimal);
var frameHue = frame.scale(0, 360).map(function(x) {
return (x + hue[num]) % 360;
}).map(int);
// var offsetH = "0";
// var offsetV = "0";
var output = frame.vals.map(function(val, n) {
var offset = em(0.05 * n + 0.1);
var hsl = "hsla(" + frameHue[n] + ", 100%, " + "50%" + ", " + "1.0" + ")";
//var o = scale(n, 0, 0.1*num, em);
return [offset, offset, frameSpread[n], hsl].join(" ");
});
return "{\r\n\ttext-shadow: " + fixedBorders.concat(output).join(",\r\n\t\t\t") + ";\r\n\t}";
}
var output = steps.vals.map(function(v, i) {
return [outputPercent(v) + " " + frameStack(i)];
});
return ("@keyframes kfRainbowStacked {\r\n" + output.join("\r\n\r\n") + "\r\n}");
}
function makeRainbowQuads() {
var fixedBorders = ["0.05em 0.05em 0.1em rgba(0,0,0,1)", "0 0 1px rgb(0,0,0)", "0 0 3px rgb(255,255,255)"];
var steps = new Steps(12);
//var extras = steps.scaleSin(0.8, 0.4);
//var lightness = steps.scaleSin(0.25, 0.75, pct0);
var hue = steps.scale(0, 360);
var spread = steps.scaleSin(0.25, 1.5);
function frameQuad(num) {
var frame = new Steps(12);
// var extra = alt(num, 0.8, 0.4);
// var lightness = alt(num, 0.35, 0.65, pct0);
// var frameSpread = frame.scale(0.5, 2.0).map(function(x) {
// return (x + spread[num]);
// })
// .map(em);
//var frameSpread = frame.scale(4, 6, px);
var alpha = frame.scale(0.9, 1.0, decimal);
var frameHue = frame.scale(0, 360).map(function(x) {
return (x + hue[num]) % 360;
}).map(int);
var offset = frame.scale(2, 26, px);
// var offsetH = "0";
// var offsetV = "0";
var output = frame.vals.map(function(val, n) {
var offset = em(1.0); //em(0.05 * n + 0.1);
var hsl = "hsla(" + frameHue[n] + ", 100%, " + "50%" + ", " + "1.0" + ")";
//var o = scale(n, 0, 0.1*num, em);
return [offset, offset, /*frameSpread[n]*/ "1.0em", hsl].join(" ");
});
return "{\r\n\ttext-shadow: " + fixedBorders.concat(output).join(",\r\n\t\t\t") + ";\r\n\t}";
}
var output = steps.vals.map(function(v, i) {
return [outputPercent(v) + " " + frameQuad(i)];
});
return ("@keyframes kfRainbowQuads {\r\n" + output.join("\r\n\r\n") + "\r\n}");
}
//console.log(makeRainbowFuzz());
console.log(makeRainbowStacked());
//console.log(makeRainbowQuads());
Raw
Rainbowize.css
/*
* Cycle perfectly through all of the rainbow colors in 12 increments of 30 degrees (Hue) using HSL values with an RGB fallback color
*/
@keyframes rainbowizeColor {
0%, 100% {
color: #ff0000;
color: hsl(0, 100%, 50%);
}
8.333% {
color: #ff8000;
color: hsl(30, 100%, 50%);
}
16.667% {
color: #ffff00;
color: hsl(60, 100%, 50%);
}
25% {
color: #80ff00;
color: hsl(90, 100%, 50%);
}
33.333% {
color: #00ff00;
color: hsl(120, 100%, 50%);
}
41.667% {
color: #00ff80;
color: hsl(150, 100%, 50%);
}
50% {
color: #00ffff;
color: hsl(180, 100%, 50%);
}
58.333% {
color: #0080ff;
color: hsl(210, 100%, 50%);
}
66.667% {
color: #0000ff;
color: hsl(240, 100%, 50%);
}
75% {
color: #8000ff;
color: hsl(270, 100%, 50%);
}
83.333% {
color: #ff00ff;
color: hsl(300, 100%, 50%);
}
91.667% {
color: #ff0080;
color: hsl(330, 100%, 50%);
}
}
/*
* Same 12-step color cycle, except it uses a lightness value of 75% (instead of 50%) to make the colors brighter
*/
@keyframes rainbowizeColorBright {
0%, 100% {
color: #ff8080;
color: hsl(0, 100%, 75%);
}
8.333% {
color: #ffc080;
color: hsl(30, 100%, 75%);
}
16.667% {
color: #ffff80;
color: hsl(60, 100%, 75%);
}
25% {
color: #c0ff80;
color: hsl(90, 100%, 75%);
}
33.333% {
color: #80ff80;
color: hsl(120, 100%, 75%);
}
41.667% {
color: #80ffc0;
color: hsl(150, 100%, 75%);
}
50% {
color: #80ffff;
color: hsl(180, 100%, 75%);
}
58.333% {
color: #80c0ff;
color: hsl(210, 100%, 75%);
}
66.667% {
color: #8080ff;
color: hsl(240, 100%, 75%);
}
75% {
color: #c080ff;
color: hsl(270, 100%, 75%);
}
83.333% {
color: #ff80ff;
color: hsl(300, 100%, 75%);
}
91.667% {
color: #ff80c0;
color: hsl(330, 100%, 75%);
}
}
/*
* Same 12-step color cycle, except it uses a saturation value of 75% (instead of 100%) to make the colors darker
*/
@keyframes rainbowizeColorDark {
0%, 100% {
color: #e02020;
color: hsl(0, 75%, 50%);
}
8.333% {
color: #e08020;
color: hsl(30, 75%, 50%);
}
16.667% {
color: #e0e020;
color: hsl(60, 75%, 50%);
}
25% {
color: #80e020;
color: hsl(90, 75%, 50%);
}
33.333% {
color: #20e020;
color: hsl(120, 75%, 50%);
}
41.667% {
color: #20e080;
color: hsl(150, 75%, 50%);
}
50% {
color: #20e0e0;
color: hsl(180, 75%, 50%);
}
58.333% {
color: #2080e0;
color: hsl(210, 75%, 50%);
}
66.667% {
color: #2020e0;
color: hsl(240, 75%, 50%);
}
75% {
color: #8020e0;
color: hsl(270, 75%, 50%);
}
83.333% {
color: #e020e0;
color: hsl(300, 75%, 50%);
}
91.667% {
color: #e02080;
color: hsl(330, 75%, 50%);
}
}
/*
* Same as above except animate the text-shadow instead of text color (with alternate fallback colors)
*/
@keyframes rainbowizeTextShadow {
0%, 100% {
text-shadow: 2px 2px 2px #ff0000;
text-shadow: 2px 2px 2px rgba(255, 0, 0, 0.80);
text-shadow: 2px 2px 2px hsla(0, 100%, 50%, 0.80);
}
8.333% {
text-shadow: 2px 2px 2px #ff8000;
text-shadow: 2px 2px 2px rgba(255, 128, 0, 0.80);
text-shadow: 2px 2px 2px hsla(30, 100%, 50%, 0.80);
}
16.667% {
text-shadow: 2px 2px 2px #ffff00;
text-shadow: 2px 2px 2px rgba(255, 255, 0, 0.80);
text-shadow: 2px 2px 2px hsla(60, 100%, 50%, 0.80);
}
25% {
text-shadow: 2px 2px 2px #80ff00;
text-shadow: 2px 2px 2px rgba(128, 255, 0, 0.80);
text-shadow: 2px 2px 2px hsla(90, 100%, 50%, 0.80);
}
33.333% {
text-shadow: 2px 2px 2px #00ff00;
text-shadow: 2px 2px 2px rgba(0, 255, 0, 0.80);
text-shadow: 2px 2px 2px hsla(120, 100%, 50%, 0.80);
}
41.667% {
text-shadow: 2px 2px 2px #00ff80;
text-shadow: 2px 2px 2px rgba(0, 255, 128, 0.80);
text-shadow: 2px 2px 2px hsla(150, 100%, 50%, 0.80);
}
50% {
text-shadow: 2px 2px 2px #00ffff;
text-shadow: 2px 2px 2px rgba(0, 255, 255, 0.80);
text-shadow: 2px 2px 2px hsla(180, 100%, 50%, 0.80);
}
58.333% {
text-shadow: 2px 2px 2px #0080ff;
text-shadow: 2px 2px 2px rgba(0, 128, 255, 0.80);
text-shadow: 2px 2px 2px hsla(210, 100%, 50%, 0.80);
}
66.667% {
text-shadow: 2px 2px 2px #0000ff;
text-shadow: 2px 2px 2px rgba(0, 0, 255, 0.80);
text-shadow: 2px 2px 2px hsla(240, 100%, 50%, 0.80);
}
75% {
text-shadow: 2px 2px 2px #8000ff;
text-shadow: 2px 2px 2px rgba(128, 0, 255, 0.80);
text-shadow: 2px 2px 2px hsla(270, 100%, 50%, 0.80);
}
83.333% {
text-shadow: 2px 2px 2px #ff00ff;
text-shadow: 2px 2px 2px rgba(255, 0, 255, 0.80);
text-shadow: 2px 2px 2px hsla(300, 100%, 50%, 0.80);
}
91.667% {
text-shadow: 2px 2px 2px #ff0080;
text-shadow: 2px 2px 2px rgba(255, 0, 128, 0.80);
text-shadow: 2px 2px 2px hsla(330, 100%, 50%, 0.80);
}
}
/*
* For really fun effects, do something like this...
*/
@keyframes rainbowizeGlow {
0%, 100% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff0000, 0 0 0.2em #ff0000;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 0, 0.80), 0 0 0.2em rgba(255, 0, 0, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(0, 100%, 50%, 0.80), 0 0 0.2em hsla(0, 100%, 50%, 0.80);
}
8.333% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff8000, 0 0 0.2em #ff8000;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 128, 0, 0.80), 0 0 0.2em rgba(255, 128, 0, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(30, 100%, 50%, 0.80), 0 0 0.2em hsla(30, 100%, 50%, 0.80);
}
16.667% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ffff00, 0 0 0.2em #ffff00;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 255, 0, 0.80), 0 0 0.2em rgba(255, 255, 0, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(60, 100%, 50%, 0.80), 0 0 0.2em hsla(60, 100%, 50%, 0.80);
}
25% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #80ff00, 0 0 0.2em #80ff00;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(128, 255, 0, 0.80), 0 0 0.2em rgba(128, 255, 0, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(90, 100%, 50%, 0.80), 0 0 0.2em hsla(90, 100%, 50%, 0.80);
}
33.333% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ff00, 0 0 0.2em #00ff00;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 0, 0.80), 0 0 0.2em rgba(0, 255, 0, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(120, 100%, 50%, 0.80), 0 0 0.2em hsla(120, 100%, 50%, 0.80);
}
41.667% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ff80, 0 0 0.2em #00ff80;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 128, 0.80), 0 0 0.2em rgba(0, 255, 128, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(150, 100%, 50%, 0.80), 0 0 0.2em hsla(150, 100%, 50%, 0.80);
}
50% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ffff, 0 0 0.2em #00ffff;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 255, 0.80), 0 0 0.2em rgba(0, 255, 255, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(180, 100%, 50%, 0.80), 0 0 0.2em hsla(180, 100%, 50%, 0.80);
}
58.333% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #0080ff, 0 0 0.2em #0080ff;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 128, 255, 0.80), 0 0 0.2em rgba(0, 128, 255, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(210, 100%, 50%, 0.80), 0 0 0.2em hsla(210, 100%, 50%, 0.80);
}
66.667% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #0000ff, 0 0 0.2em #0000ff;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 0, 255, 0.80), 0 0 0.2em rgba(0, 0, 255, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(240, 100%, 50%, 0.80), 0 0 0.2em hsla(240, 100%, 50%, 0.80);
}
75% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #8000ff, 0 0 0.2em #8000ff;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(128, 0, 255, 0.80), 0 0 0.2em rgba(128, 0, 255, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(270, 100%, 50%, 0.80), 0 0 0.2em hsla(270, 100%, 50%, 0.80);
}
83.333% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff00ff, 0 0 0.2em #ff00ff;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 255, 0.80), 0 0 0.2em rgba(255, 0, 255, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(300, 100%, 50%, 0.80), 0 0 0.2em hsla(300, 100%, 50%, 0.80);
}
91.667% {
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff0080, 0 0 0.2em #ff0080;
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 128, 0.80), 0 0 0.2em rgba(255, 0, 128, 0.80);
text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(330, 100%, 50%, 0.80), 0 0 0.2em hsla(330, 100%, 50%, 0.80);
}
}
/*
* For completeness, here's one for the background color..
*/
@keyframes rainbowizeBackground {
0%, 100% {
background-color: #ff0000;
background-color: rgba(255, 0, 0, 1.00);
background-color: hsla(0, 100%, 50%, 1.00);
}
8.333% {
background-color: #ff8000;
background-color: rgba(255, 128, 0, 1.00);
background-color: hsla(30, 100%, 50%, 1.00);
}
16.667% {
background-color: #ffff00;
background-color: rgba(255, 255, 0, 1.00);
background-color: hsla(60, 100%, 50%, 1.00);
}
25% {
background-color: #80ff00;
background-color: rgba(128, 255, 0, 1.00);
background-color: hsla(90, 100%, 50%, 1.00);
}
33.333% {
background-color: #00ff00;
background-color: rgba(0, 255, 0, 1.00);
background-color: hsla(120, 100%, 50%, 1.00);
}
41.667% {
background-color: #00ff80;
background-color: rgba(0, 255, 128, 1.00);
background-color: hsla(150, 100%, 50%, 1.00);
}
50% {
background-color: #00ffff;
background-color: rgba(0, 255, 255, 1.00);
background-color: hsla(180, 100%, 50%, 1.00);
}
58.333% {
background-color: #0080ff;
background-color: rgba(0, 128, 255, 1.00);
background-color: hsla(210, 100%, 50%, 1.00);
}
66.667% {
background-color: #0000ff;
background-color: rgba(0, 0, 255, 1.00);
background-color: hsla(240, 100%, 50%, 1.00);
}
75% {
background-color: #8000ff;
background-color: rgba(128, 0, 255, 1.00);
background-color: hsla(270, 100%, 50%, 1.00);
}
83.333% {
background-color: #ff00ff;
background-color: rgba(255, 0, 255, 1.00);
background-color: hsla(300, 100%, 50%, 1.00);
}
91.667% {
background-color: #ff0080;
background-color: rgba(255, 0, 128, 1.00);
background-color: hsla(330, 100%, 50%, 1.00);
}
}
/*
* To use the keyframes, reference them in a CSS class like this:
*/
.rbText {
animation: rainbowizeColor 10s 0 infinite alternate cubic-bezier(0,0,1,1);
}
.rbTextDark {
animation: rainbowizeColorDark 10s 0 infinite alternate cubic-bezier(1,0,0,1);
}
.rbTextBright {
animation: rainbowizeColorBright 10s 0 infinite alternate cubic-bezier(1,0.5,0,0.5);
}
.rbTextShadow {
color: white;
animation: rainbowizeTextShadow 10s 0 infinite alternate linear;
font-weight: 900;
}
.rbGlow {
color: white;
animation: rainbowizeGlow 10s 0 infinite alternate linear;
}
@keyframes kfRainbowStacked {
0%, 100% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(0, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(30, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(60, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(90, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(120, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(150, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(180, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(209, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(240, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(270, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(300, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(330, 100%, 50%, 1.0);
}
8.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(30, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(60, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(90, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(120, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(150, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(180, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(210, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(239, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(270, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(300, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(330, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(0, 100%, 50%, 1.0);
}
16.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(60, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(90, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(120, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(150, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(180, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(210, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(240, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(270, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(300, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(330, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(0, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(30, 100%, 50%, 1.0);
}
25.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(90, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(120, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(150, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(180, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(210, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(240, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(270, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(300, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(330, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(0, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(30, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(60, 100%, 50%, 1.0);
}
33.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(120, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(150, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(180, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(210, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(240, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(270, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(300, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(330, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(0, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(30, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(60, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(90, 100%, 50%, 1.0);
}
41.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(150, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(180, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(210, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(240, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(270, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(300, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(330, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(0, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(30, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(60, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(90, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(120, 100%, 50%, 1.0);
}
50.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(180, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(210, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(240, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(270, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(300, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(330, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(0, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(30, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(60, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(90, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(120, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(150, 100%, 50%, 1.0);
}
58.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(209, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(239, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(270, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(300, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(330, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(0, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(30, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(59, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(90, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(120, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(150, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(180, 100%, 50%, 1.0);
}
66.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(240, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(270, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(300, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(330, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(0, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(30, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(60, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(90, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(120, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(150, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(180, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(210, 100%, 50%, 1.0);
}
75.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(270, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(300, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(330, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(0, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(30, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(60, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(90, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(120, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(150, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(180, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(210, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(240, 100%, 50%, 1.0);
}
83.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(300, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(330, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(0, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(30, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(60, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(90, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(120, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(150, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(180, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(210, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(240, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(270, 100%, 50%, 1.0);
}
91.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0.100em 0.100em 4px hsla(330, 100%, 50%, 1.0),
0.150em 0.150em 4px hsla(0, 100%, 50%, 1.0),
0.200em 0.200em 4px hsla(30, 100%, 50%, 1.0),
0.250em 0.250em 4px hsla(60, 100%, 50%, 1.0),
0.300em 0.300em 4px hsla(90, 100%, 50%, 1.0),
0.350em 0.350em 4px hsla(120, 100%, 50%, 1.0),
0.400em 0.400em 5px hsla(150, 100%, 50%, 1.0),
0.450em 0.450em 5px hsla(180, 100%, 50%, 1.0),
0.500em 0.500em 5px hsla(210, 100%, 50%, 1.0),
0.550em 0.550em 5px hsla(240, 100%, 50%, 1.0),
0.600em 0.600em 5px hsla(270, 100%, 50%, 1.0),
0.650em 0.650em 5px hsla(300, 100%, 50%, 1.0);
}
}
.rbStacked {
animation: kfRainbowStacked 3s 0s infinite alternate-reverse ease;
}
keyframes kfRainbowFuzz {
0%, 100% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(0, 100%, 25%, 0.900),
0 0 0.250em hsla(10, 100%, 25%, 0.903),
0 0 0.250em hsla(20, 100%, 25%, 0.906),
0 0 0.250em hsla(30, 100%, 25%, 0.908),
0 0 0.250em hsla(40, 100%, 25%, 0.911),
0 0 0.250em hsla(50, 100%, 25%, 0.914),
0 0 0.250em hsla(60, 100%, 25%, 0.917),
0 0 0.250em hsla(69, 100%, 25%, 0.919),
0 0 0.250em hsla(80, 100%, 25%, 0.922),
0 0 0.250em hsla(90, 100%, 25%, 0.925),
0 0 0.250em hsla(100, 100%, 25%, 0.928),
0 0 0.250em hsla(109, 100%, 25%, 0.931),
0 0 0.250em hsla(120, 100%, 25%, 0.933),
0 0 0.250em hsla(130, 100%, 25%, 0.936),
0 0 0.250em hsla(139, 100%, 25%, 0.939),
0 0 0.250em hsla(150, 100%, 25%, 0.942),
0 0 0.250em hsla(160, 100%, 25%, 0.944),
0 0 0.250em hsla(170, 100%, 25%, 0.947),
0 0 0.250em hsla(180, 100%, 25%, 0.950),
0 0 0.250em hsla(190, 100%, 25%, 0.953),
0 0 0.250em hsla(200, 100%, 25%, 0.956),
0 0 0.250em hsla(209, 100%, 25%, 0.958),
0 0 0.250em hsla(219, 100%, 25%, 0.961),
0 0 0.250em hsla(229, 100%, 25%, 0.964),
0 0 0.250em hsla(240, 100%, 25%, 0.967),
0 0 0.250em hsla(250, 100%, 25%, 0.969),
0 0 0.250em hsla(260, 100%, 25%, 0.972),
0 0 0.250em hsla(270, 100%, 25%, 0.975),
0 0 0.250em hsla(279, 100%, 25%, 0.978),
0 0 0.250em hsla(289, 100%, 25%, 0.981),
0 0 0.250em hsla(300, 100%, 25%, 0.983),
0 0 0.250em hsla(310, 100%, 25%, 0.986),
0 0 0.250em hsla(320, 100%, 25%, 0.989),
0 0 0.250em hsla(330, 100%, 25%, 0.992),
0 0 0.250em hsla(340, 100%, 25%, 0.994),
0 0 0.250em hsla(350, 100%, 25%, 0.997);
}
8.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(30, 100%, 38%, 0.900),
0 0 0.259em hsla(40, 100%, 38%, 0.903),
0 0 0.268em hsla(50, 100%, 38%, 0.906),
0 0 0.277em hsla(60, 100%, 38%, 0.908),
0 0 0.286em hsla(70, 100%, 38%, 0.911),
0 0 0.295em hsla(80, 100%, 38%, 0.914),
0 0 0.304em hsla(90, 100%, 38%, 0.917),
0 0 0.313em hsla(99, 100%, 38%, 0.919),
0 0 0.322em hsla(110, 100%, 38%, 0.922),
0 0 0.331em hsla(120, 100%, 38%, 0.925),
0 0 0.340em hsla(130, 100%, 38%, 0.928),
0 0 0.349em hsla(140, 100%, 38%, 0.931),
0 0 0.358em hsla(150, 100%, 38%, 0.933),
0 0 0.367em hsla(160, 100%, 38%, 0.936),
0 0 0.376em hsla(169, 100%, 38%, 0.939),
0 0 0.385em hsla(180, 100%, 38%, 0.942),
0 0 0.394em hsla(190, 100%, 38%, 0.944),
0 0 0.403em hsla(200, 100%, 38%, 0.947),
0 0 0.412em hsla(210, 100%, 38%, 0.950),
0 0 0.421em hsla(220, 100%, 38%, 0.953),
0 0 0.430em hsla(230, 100%, 38%, 0.956),
0 0 0.439em hsla(239, 100%, 38%, 0.958),
0 0 0.448em hsla(249, 100%, 38%, 0.961),
0 0 0.457em hsla(260, 100%, 38%, 0.964),
0 0 0.466em hsla(270, 100%, 38%, 0.967),
0 0 0.475em hsla(280, 100%, 38%, 0.969),
0 0 0.484em hsla(290, 100%, 38%, 0.972),
0 0 0.493em hsla(300, 100%, 38%, 0.975),
0 0 0.502em hsla(309, 100%, 38%, 0.978),
0 0 0.511em hsla(319, 100%, 38%, 0.981),
0 0 0.520em hsla(330, 100%, 38%, 0.983),
0 0 0.529em hsla(340, 100%, 38%, 0.986),
0 0 0.538em hsla(350, 100%, 38%, 0.989),
0 0 0.547em hsla(0, 100%, 38%, 0.992),
0 0 0.556em hsla(10, 100%, 38%, 0.994),
0 0 0.565em hsla(20, 100%, 38%, 0.997);
}
16.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(60, 100%, 50%, 0.900),
0 0 0.267em hsla(70, 100%, 50%, 0.903),
0 0 0.285em hsla(80, 100%, 50%, 0.906),
0 0 0.302em hsla(90, 100%, 50%, 0.908),
0 0 0.319em hsla(100, 100%, 50%, 0.911),
0 0 0.337em hsla(110, 100%, 50%, 0.914),
0 0 0.354em hsla(120, 100%, 50%, 0.917),
0 0 0.372em hsla(130, 100%, 50%, 0.919),
0 0 0.389em hsla(140, 100%, 50%, 0.922),
0 0 0.406em hsla(150, 100%, 50%, 0.925),
0 0 0.424em hsla(160, 100%, 50%, 0.928),
0 0 0.441em hsla(170, 100%, 50%, 0.931),
0 0 0.458em hsla(180, 100%, 50%, 0.933),
0 0 0.476em hsla(190, 100%, 50%, 0.936),
0 0 0.493em hsla(199, 100%, 50%, 0.939),
0 0 0.510em hsla(210, 100%, 50%, 0.942),
0 0 0.528em hsla(220, 100%, 50%, 0.944),
0 0 0.545em hsla(230, 100%, 50%, 0.947),
0 0 0.563em hsla(240, 100%, 50%, 0.950),
0 0 0.580em hsla(250, 100%, 50%, 0.953),
0 0 0.597em hsla(260, 100%, 50%, 0.956),
0 0 0.615em hsla(270, 100%, 50%, 0.958),
0 0 0.632em hsla(280, 100%, 50%, 0.961),
0 0 0.649em hsla(290, 100%, 50%, 0.964),
0 0 0.667em hsla(300, 100%, 50%, 0.967),
0 0 0.684em hsla(310, 100%, 50%, 0.969),
0 0 0.701em hsla(320, 100%, 50%, 0.972),
0 0 0.719em hsla(330, 100%, 50%, 0.975),
0 0 0.736em hsla(339, 100%, 50%, 0.978),
0 0 0.753em hsla(349, 100%, 50%, 0.981),
0 0 0.771em hsla(0, 100%, 50%, 0.983),
0 0 0.788em hsla(10, 100%, 50%, 0.986),
0 0 0.806em hsla(20, 100%, 50%, 0.989),
0 0 0.823em hsla(30, 100%, 50%, 0.992),
0 0 0.840em hsla(40, 100%, 50%, 0.994),
0 0 0.858em hsla(50, 100%, 50%, 0.997);
}
25.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(90, 100%, 60%, 0.900),
0 0 0.275em hsla(100, 100%, 60%, 0.903),
0 0 0.299em hsla(110, 100%, 60%, 0.906),
0 0 0.324em hsla(120, 100%, 60%, 0.908),
0 0 0.348em hsla(130, 100%, 60%, 0.911),
0 0 0.373em hsla(140, 100%, 60%, 0.914),
0 0 0.397em hsla(150, 100%, 60%, 0.917),
0 0 0.422em hsla(160, 100%, 60%, 0.919),
0 0 0.446em hsla(170, 100%, 60%, 0.922),
0 0 0.471em hsla(180, 100%, 60%, 0.925),
0 0 0.496em hsla(190, 100%, 60%, 0.928),
0 0 0.520em hsla(200, 100%, 60%, 0.931),
0 0 0.545em hsla(210, 100%, 60%, 0.933),
0 0 0.569em hsla(220, 100%, 60%, 0.936),
0 0 0.594em hsla(229, 100%, 60%, 0.939),
0 0 0.618em hsla(240, 100%, 60%, 0.942),
0 0 0.643em hsla(250, 100%, 60%, 0.944),
0 0 0.667em hsla(260, 100%, 60%, 0.947),
0 0 0.692em hsla(270, 100%, 60%, 0.950),
0 0 0.716em hsla(280, 100%, 60%, 0.953),
0 0 0.741em hsla(290, 100%, 60%, 0.956),
0 0 0.766em hsla(300, 100%, 60%, 0.958),
0 0 0.790em hsla(310, 100%, 60%, 0.961),
0 0 0.815em hsla(320, 100%, 60%, 0.964),
0 0 0.839em hsla(330, 100%, 60%, 0.967),
0 0 0.864em hsla(340, 100%, 60%, 0.969),
0 0 0.888em hsla(350, 100%, 60%, 0.972),
0 0 0.913em hsla(0, 100%, 60%, 0.975),
0 0 0.937em hsla(9, 100%, 60%, 0.978),
0 0 0.962em hsla(19, 100%, 60%, 0.981),
0 0 0.987em hsla(30, 100%, 60%, 0.983),
0 0 1.011em hsla(40, 100%, 60%, 0.986),
0 0 1.036em hsla(50, 100%, 60%, 0.989),
0 0 1.060em hsla(60, 100%, 60%, 0.992),
0 0 1.085em hsla(70, 100%, 60%, 0.994),
0 0 1.109em hsla(80, 100%, 60%, 0.997);
}
33.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(120, 100%, 68%, 0.900),
0 0 0.280em hsla(130, 100%, 68%, 0.903),
0 0 0.310em hsla(140, 100%, 68%, 0.906),
0 0 0.340em hsla(150, 100%, 68%, 0.908),
0 0 0.370em hsla(160, 100%, 68%, 0.911),
0 0 0.400em hsla(170, 100%, 68%, 0.914),
0 0 0.430em hsla(180, 100%, 68%, 0.917),
0 0 0.460em hsla(190, 100%, 68%, 0.919),
0 0 0.491em hsla(200, 100%, 68%, 0.922),
0 0 0.521em hsla(210, 100%, 68%, 0.925),
0 0 0.551em hsla(220, 100%, 68%, 0.928),
0 0 0.581em hsla(230, 100%, 68%, 0.931),
0 0 0.611em hsla(240, 100%, 68%, 0.933),
0 0 0.641em hsla(250, 100%, 68%, 0.936),
0 0 0.671em hsla(260, 100%, 68%, 0.939),
0 0 0.701em hsla(270, 100%, 68%, 0.942),
0 0 0.731em hsla(280, 100%, 68%, 0.944),
0 0 0.761em hsla(290, 100%, 68%, 0.947),
0 0 0.791em hsla(300, 100%, 68%, 0.950),
0 0 0.821em hsla(310, 100%, 68%, 0.953),
0 0 0.851em hsla(320, 100%, 68%, 0.956),
0 0 0.881em hsla(330, 100%, 68%, 0.958),
0 0 0.912em hsla(340, 100%, 68%, 0.961),
0 0 0.942em hsla(350, 100%, 68%, 0.964),
0 0 0.972em hsla(0, 100%, 68%, 0.967),
0 0 1.002em hsla(10, 100%, 68%, 0.969),
0 0 1.032em hsla(20, 100%, 68%, 0.972),
0 0 1.062em hsla(30, 100%, 68%, 0.975),
0 0 1.092em hsla(39, 100%, 68%, 0.978),
0 0 1.122em hsla(49, 100%, 68%, 0.981),
0 0 1.152em hsla(60, 100%, 68%, 0.983),
0 0 1.182em hsla(70, 100%, 68%, 0.986),
0 0 1.212em hsla(80, 100%, 68%, 0.989),
0 0 1.242em hsla(90, 100%, 68%, 0.992),
0 0 1.272em hsla(100, 100%, 68%, 0.994),
0 0 1.302em hsla(110, 100%, 68%, 0.997);
}
41.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(150, 100%, 73%, 0.900),
0 0 0.284em hsla(160, 100%, 73%, 0.903),
0 0 0.317em hsla(170, 100%, 73%, 0.906),
0 0 0.351em hsla(180, 100%, 73%, 0.908),
0 0 0.384em hsla(190, 100%, 73%, 0.911),
0 0 0.418em hsla(200, 100%, 73%, 0.914),
0 0 0.451em hsla(210, 100%, 73%, 0.917),
0 0 0.485em hsla(220, 100%, 73%, 0.919),
0 0 0.518em hsla(230, 100%, 73%, 0.922),
0 0 0.552em hsla(240, 100%, 73%, 0.925),
0 0 0.585em hsla(250, 100%, 73%, 0.928),
0 0 0.619em hsla(260, 100%, 73%, 0.931),
0 0 0.652em hsla(270, 100%, 73%, 0.933),
0 0 0.686em hsla(280, 100%, 73%, 0.936),
0 0 0.720em hsla(290, 100%, 73%, 0.939),
0 0 0.753em hsla(300, 100%, 73%, 0.942),
0 0 0.787em hsla(310, 100%, 73%, 0.944),
0 0 0.820em hsla(320, 100%, 73%, 0.947),
0 0 0.854em hsla(330, 100%, 73%, 0.950),
0 0 0.887em hsla(340, 100%, 73%, 0.953),
0 0 0.921em hsla(350, 100%, 73%, 0.956),
0 0 0.954em hsla(0, 100%, 73%, 0.958),
0 0 0.988em hsla(10, 100%, 73%, 0.961),
0 0 1.021em hsla(20, 100%, 73%, 0.964),
0 0 1.055em hsla(30, 100%, 73%, 0.967),
0 0 1.088em hsla(40, 100%, 73%, 0.969),
0 0 1.122em hsla(50, 100%, 73%, 0.972),
0 0 1.156em hsla(60, 100%, 73%, 0.975),
0 0 1.189em hsla(69, 100%, 73%, 0.978),
0 0 1.223em hsla(79, 100%, 73%, 0.981),
0 0 1.256em hsla(90, 100%, 73%, 0.983),
0 0 1.290em hsla(100, 100%, 73%, 0.986),
0 0 1.323em hsla(110, 100%, 73%, 0.989),
0 0 1.357em hsla(120, 100%, 73%, 0.992),
0 0 1.390em hsla(130, 100%, 73%, 0.994),
0 0 1.424em hsla(140, 100%, 73%, 0.997);
}
50.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(180, 100%, 75%, 0.900),
0 0 0.285em hsla(190, 100%, 75%, 0.903),
0 0 0.319em hsla(200, 100%, 75%, 0.906),
0 0 0.354em hsla(210, 100%, 75%, 0.908),
0 0 0.389em hsla(220, 100%, 75%, 0.911),
0 0 0.424em hsla(230, 100%, 75%, 0.914),
0 0 0.458em hsla(240, 100%, 75%, 0.917),
0 0 0.493em hsla(250, 100%, 75%, 0.919),
0 0 0.528em hsla(260, 100%, 75%, 0.922),
0 0 0.563em hsla(270, 100%, 75%, 0.925),
0 0 0.597em hsla(280, 100%, 75%, 0.928),
0 0 0.632em hsla(290, 100%, 75%, 0.931),
0 0 0.667em hsla(300, 100%, 75%, 0.933),
0 0 0.701em hsla(310, 100%, 75%, 0.936),
0 0 0.736em hsla(320, 100%, 75%, 0.939),
0 0 0.771em hsla(330, 100%, 75%, 0.942),
0 0 0.806em hsla(340, 100%, 75%, 0.944),
0 0 0.840em hsla(350, 100%, 75%, 0.947),
0 0 0.875em hsla(0, 100%, 75%, 0.950),
0 0 0.910em hsla(10, 100%, 75%, 0.953),
0 0 0.944em hsla(20, 100%, 75%, 0.956),
0 0 0.979em hsla(30, 100%, 75%, 0.958),
0 0 1.014em hsla(40, 100%, 75%, 0.961),
0 0 1.049em hsla(50, 100%, 75%, 0.964),
0 0 1.083em hsla(60, 100%, 75%, 0.967),
0 0 1.118em hsla(70, 100%, 75%, 0.969),
0 0 1.153em hsla(80, 100%, 75%, 0.972),
0 0 1.188em hsla(90, 100%, 75%, 0.975),
0 0 1.222em hsla(99, 100%, 75%, 0.978),
0 0 1.257em hsla(109, 100%, 75%, 0.981),
0 0 1.292em hsla(120, 100%, 75%, 0.983),
0 0 1.326em hsla(130, 100%, 75%, 0.986),
0 0 1.361em hsla(140, 100%, 75%, 0.989),
0 0 1.396em hsla(150, 100%, 75%, 0.992),
0 0 1.431em hsla(160, 100%, 75%, 0.994),
0 0 1.465em hsla(170, 100%, 75%, 0.997);
}
58.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(209, 100%, 73%, 0.900),
0 0 0.284em hsla(219, 100%, 73%, 0.903),
0 0 0.317em hsla(229, 100%, 73%, 0.906),
0 0 0.351em hsla(239, 100%, 73%, 0.908),
0 0 0.384em hsla(249, 100%, 73%, 0.911),
0 0 0.418em hsla(260, 100%, 73%, 0.914),
0 0 0.451em hsla(270, 100%, 73%, 0.917),
0 0 0.485em hsla(279, 100%, 73%, 0.919),
0 0 0.518em hsla(290, 100%, 73%, 0.922),
0 0 0.552em hsla(300, 100%, 73%, 0.925),
0 0 0.585em hsla(310, 100%, 73%, 0.928),
0 0 0.619em hsla(319, 100%, 73%, 0.931),
0 0 0.652em hsla(330, 100%, 73%, 0.933),
0 0 0.686em hsla(340, 100%, 73%, 0.936),
0 0 0.720em hsla(349, 100%, 73%, 0.939),
0 0 0.753em hsla(0, 100%, 73%, 0.942),
0 0 0.787em hsla(10, 100%, 73%, 0.944),
0 0 0.820em hsla(20, 100%, 73%, 0.947),
0 0 0.854em hsla(30, 100%, 73%, 0.950),
0 0 0.887em hsla(40, 100%, 73%, 0.953),
0 0 0.921em hsla(50, 100%, 73%, 0.956),
0 0 0.954em hsla(59, 100%, 73%, 0.958),
0 0 0.988em hsla(69, 100%, 73%, 0.961),
0 0 1.021em hsla(79, 100%, 73%, 0.964),
0 0 1.055em hsla(90, 100%, 73%, 0.967),
0 0 1.088em hsla(100, 100%, 73%, 0.969),
0 0 1.122em hsla(110, 100%, 73%, 0.972),
0 0 1.156em hsla(120, 100%, 73%, 0.975),
0 0 1.189em hsla(129, 100%, 73%, 0.978),
0 0 1.223em hsla(139, 100%, 73%, 0.981),
0 0 1.256em hsla(150, 100%, 73%, 0.983),
0 0 1.290em hsla(160, 100%, 73%, 0.986),
0 0 1.323em hsla(170, 100%, 73%, 0.989),
0 0 1.357em hsla(180, 100%, 73%, 0.992),
0 0 1.390em hsla(190, 100%, 73%, 0.994),
0 0 1.424em hsla(200, 100%, 73%, 0.997);
}
66.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(240, 100%, 68%, 0.900),
0 0 0.280em hsla(250, 100%, 68%, 0.903),
0 0 0.310em hsla(260, 100%, 68%, 0.906),
0 0 0.340em hsla(270, 100%, 68%, 0.908),
0 0 0.370em hsla(280, 100%, 68%, 0.911),
0 0 0.400em hsla(290, 100%, 68%, 0.914),
0 0 0.430em hsla(300, 100%, 68%, 0.917),
0 0 0.460em hsla(310, 100%, 68%, 0.919),
0 0 0.491em hsla(320, 100%, 68%, 0.922),
0 0 0.521em hsla(330, 100%, 68%, 0.925),
0 0 0.551em hsla(340, 100%, 68%, 0.928),
0 0 0.581em hsla(350, 100%, 68%, 0.931),
0 0 0.611em hsla(0, 100%, 68%, 0.933),
0 0 0.641em hsla(10, 100%, 68%, 0.936),
0 0 0.671em hsla(20, 100%, 68%, 0.939),
0 0 0.701em hsla(30, 100%, 68%, 0.942),
0 0 0.731em hsla(40, 100%, 68%, 0.944),
0 0 0.761em hsla(50, 100%, 68%, 0.947),
0 0 0.791em hsla(60, 100%, 68%, 0.950),
0 0 0.821em hsla(70, 100%, 68%, 0.953),
0 0 0.851em hsla(80, 100%, 68%, 0.956),
0 0 0.881em hsla(90, 100%, 68%, 0.958),
0 0 0.912em hsla(100, 100%, 68%, 0.961),
0 0 0.942em hsla(110, 100%, 68%, 0.964),
0 0 0.972em hsla(120, 100%, 68%, 0.967),
0 0 1.002em hsla(130, 100%, 68%, 0.969),
0 0 1.032em hsla(140, 100%, 68%, 0.972),
0 0 1.062em hsla(150, 100%, 68%, 0.975),
0 0 1.092em hsla(160, 100%, 68%, 0.978),
0 0 1.122em hsla(170, 100%, 68%, 0.981),
0 0 1.152em hsla(180, 100%, 68%, 0.983),
0 0 1.182em hsla(190, 100%, 68%, 0.986),
0 0 1.212em hsla(200, 100%, 68%, 0.989),
0 0 1.242em hsla(210, 100%, 68%, 0.992),
0 0 1.272em hsla(220, 100%, 68%, 0.994),
0 0 1.302em hsla(230, 100%, 68%, 0.997);
}
75.000% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(270, 100%, 60%, 0.900),
0 0 0.275em hsla(280, 100%, 60%, 0.903),
0 0 0.299em hsla(290, 100%, 60%, 0.906),
0 0 0.324em hsla(300, 100%, 60%, 0.908),
0 0 0.348em hsla(310, 100%, 60%, 0.911),
0 0 0.373em hsla(320, 100%, 60%, 0.914),
0 0 0.397em hsla(330, 100%, 60%, 0.917),
0 0 0.422em hsla(340, 100%, 60%, 0.919),
0 0 0.446em hsla(350, 100%, 60%, 0.922),
0 0 0.471em hsla(0, 100%, 60%, 0.925),
0 0 0.496em hsla(10, 100%, 60%, 0.928),
0 0 0.520em hsla(20, 100%, 60%, 0.931),
0 0 0.545em hsla(30, 100%, 60%, 0.933),
0 0 0.569em hsla(40, 100%, 60%, 0.936),
0 0 0.594em hsla(50, 100%, 60%, 0.939),
0 0 0.618em hsla(60, 100%, 60%, 0.942),
0 0 0.643em hsla(70, 100%, 60%, 0.944),
0 0 0.667em hsla(80, 100%, 60%, 0.947),
0 0 0.692em hsla(90, 100%, 60%, 0.950),
0 0 0.716em hsla(100, 100%, 60%, 0.953),
0 0 0.741em hsla(110, 100%, 60%, 0.956),
0 0 0.766em hsla(120, 100%, 60%, 0.958),
0 0 0.790em hsla(130, 100%, 60%, 0.961),
0 0 0.815em hsla(140, 100%, 60%, 0.964),
0 0 0.839em hsla(150, 100%, 60%, 0.967),
0 0 0.864em hsla(160, 100%, 60%, 0.969),
0 0 0.888em hsla(170, 100%, 60%, 0.972),
0 0 0.913em hsla(180, 100%, 60%, 0.975),
0 0 0.937em hsla(190, 100%, 60%, 0.978),
0 0 0.962em hsla(200, 100%, 60%, 0.981),
0 0 0.987em hsla(210, 100%, 60%, 0.983),
0 0 1.011em hsla(220, 100%, 60%, 0.986),
0 0 1.036em hsla(230, 100%, 60%, 0.989),
0 0 1.060em hsla(240, 100%, 60%, 0.992),
0 0 1.085em hsla(250, 100%, 60%, 0.994),
0 0 1.109em hsla(260, 100%, 60%, 0.997);
}
83.333% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(300, 100%, 50%, 0.900),
0 0 0.267em hsla(310, 100%, 50%, 0.903),
0 0 0.285em hsla(320, 100%, 50%, 0.906),
0 0 0.302em hsla(330, 100%, 50%, 0.908),
0 0 0.319em hsla(340, 100%, 50%, 0.911),
0 0 0.337em hsla(350, 100%, 50%, 0.914),
0 0 0.354em hsla(0, 100%, 50%, 0.917),
0 0 0.372em hsla(10, 100%, 50%, 0.919),
0 0 0.389em hsla(20, 100%, 50%, 0.922),
0 0 0.406em hsla(30, 100%, 50%, 0.925),
0 0 0.424em hsla(40, 100%, 50%, 0.928),
0 0 0.441em hsla(50, 100%, 50%, 0.931),
0 0 0.458em hsla(60, 100%, 50%, 0.933),
0 0 0.476em hsla(70, 100%, 50%, 0.936),
0 0 0.493em hsla(80, 100%, 50%, 0.939),
0 0 0.510em hsla(90, 100%, 50%, 0.942),
0 0 0.528em hsla(100, 100%, 50%, 0.944),
0 0 0.545em hsla(110, 100%, 50%, 0.947),
0 0 0.563em hsla(120, 100%, 50%, 0.950),
0 0 0.580em hsla(130, 100%, 50%, 0.953),
0 0 0.597em hsla(140, 100%, 50%, 0.956),
0 0 0.615em hsla(150, 100%, 50%, 0.958),
0 0 0.632em hsla(160, 100%, 50%, 0.961),
0 0 0.649em hsla(170, 100%, 50%, 0.964),
0 0 0.667em hsla(180, 100%, 50%, 0.967),
0 0 0.684em hsla(190, 100%, 50%, 0.969),
0 0 0.701em hsla(200, 100%, 50%, 0.972),
0 0 0.719em hsla(210, 100%, 50%, 0.975),
0 0 0.736em hsla(220, 100%, 50%, 0.978),
0 0 0.753em hsla(230, 100%, 50%, 0.981),
0 0 0.771em hsla(240, 100%, 50%, 0.983),
0 0 0.788em hsla(250, 100%, 50%, 0.986),
0 0 0.806em hsla(260, 100%, 50%, 0.989),
0 0 0.823em hsla(270, 100%, 50%, 0.992),
0 0 0.840em hsla(280, 100%, 50%, 0.994),
0 0 0.858em hsla(290, 100%, 50%, 0.997);
}
91.667% {
text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
0 0 1px rgb(0,0,0),
0 0 3px rgb(255,255,255),
0 0 0.250em hsla(330, 100%, 38%, 0.900),
0 0 0.259em hsla(340, 100%, 38%, 0.903),
0 0 0.268em hsla(350, 100%, 38%, 0.906),
0 0 0.277em hsla(0, 100%, 38%, 0.908),
0 0 0.286em hsla(10, 100%, 38%, 0.911),
0 0 0.295em hsla(20, 100%, 38%, 0.914),
0 0 0.304em hsla(30, 100%, 38%, 0.917),
0 0 0.313em hsla(40, 100%, 38%, 0.919),
0 0 0.322em hsla(50, 100%, 38%, 0.922),
0 0 0.331em hsla(60, 100%, 38%, 0.925),
0 0 0.340em hsla(70, 100%, 38%, 0.928),
0 0 0.349em hsla(80, 100%, 38%, 0.931),
0 0 0.358em hsla(90, 100%, 38%, 0.933),
0 0 0.367em hsla(100, 100%, 38%, 0.936),
0 0 0.376em hsla(110, 100%, 38%, 0.939),
0 0 0.385em hsla(120, 100%, 38%, 0.942),
0 0 0.394em hsla(130, 100%, 38%, 0.944),
0 0 0.403em hsla(140, 100%, 38%, 0.947),
0 0 0.412em hsla(150, 100%, 38%, 0.950),
0 0 0.421em hsla(160, 100%, 38%, 0.953),
0 0 0.430em hsla(170, 100%, 38%, 0.956),
0 0 0.439em hsla(180, 100%, 38%, 0.958),
0 0 0.448em hsla(190, 100%, 38%, 0.961),
0 0 0.457em hsla(200, 100%, 38%, 0.964),
0 0 0.466em hsla(210, 100%, 38%, 0.967),
0 0 0.475em hsla(220, 100%, 38%, 0.969),
0 0 0.484em hsla(230, 100%, 38%, 0.972),
0 0 0.493em hsla(240, 100%, 38%, 0.975),
0 0 0.502em hsla(250, 100%, 38%, 0.978),
0 0 0.511em hsla(260, 100%, 38%, 0.981),
0 0 0.520em hsla(270, 100%, 38%, 0.983),
0 0 0.529em hsla(280, 100%, 38%, 0.986),
0 0 0.538em hsla(290, 100%, 38%, 0.989),
0 0 0.547em hsla(300, 100%, 38%, 0.992),
0 0 0.556em hsla(310, 100%, 38%, 0.994),
0 0 0.565em hsla(320, 100%, 38%, 0.997);
}
}
.rbFuzz {
animation: rainbowizeColorDark 41s -17s infinite normal ease,
kfRainbowFuzz 11s -5s infinite normal linear;
}
.rbFuzz2 {
animation: rainbowizeColorBright 37s -11s infinite normal linear,
kfRainbowFuzz 7s 0 infinite alternate-reverse ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment