[Sugarcube] Cycling through background colors on the same passage

pizzaland

I originally had this Youtube video set to play as my background (warning, flashing colors):

However, if possible, I'd rather just skip the video and have my background color cycle between red, green and blue at .5 second intervals. Is this possible, or can I only change it for each separate passage (i.e.: one red, one green, one blue)?

TheMadExile

Yes. Try something like the following style: (goes in Story Stylesheet)

body {
    -webkit-animation: discolights 2s linear infinite;
            animation: discolights 2s linear infinite;
}
@-webkit-keyframes discolights {
    0% { background-color: red; }
    33% { background-color: green; }
    66% { background-color: blue; }
    100% { background-color: red; }
}
@keyframes discolights {
    0% { background-color: red; }
    33% { background-color: green; }
    66% { background-color: blue; }
    100% { background-color: red; }
}

If you wanted it to only apply to certain passages, simply tag each passage you want the disco background on with disco in the editor and change the first line like so:

FIND:

body {

REPLACE WITH:

body.disco {

Alternatively, if you wanted it to apply most of the time and only want to disable it on certain passages, simply tag each passage you do not want the disco background on with no-disco in the editor and change the first line like so:

FIND:

body {

REPLACE WITH:

body:not(.no-disco) {

pizzaland

Thanks so much! Absolutely perfect. Really appreciate your taking the time.