NOTE: Due to way that Harlowe has implemented it's passage transition effect there can be issues when using HTML elements directly within a Passage, doing so can cause some text to appear instantly while other text appears using the normal fade-in.
The following example demonstrates this issue, just place it within a new Passage (or Project) then view that Passage.
The quick brown fox jumped over the lazy dog.
<div><span class="rainbow">The quick brown fox jumped over the lazy dog.</span></div>
The quick brown fox jumped over the lazy dog.
... because of this issue I generally recommend using a named hook as the target of a CSS selector rather than a div or span element.
A. If you view your story in a web-browser and then use your web-browser's built-in Developer Tools to Inspect the HTML elements being generated for your (text-style:) macro example you will see something like the following:
<tw-expression type="macro" name="text-style"></tw-expression>
<tw-hook style="animation: rumble 0.1s linear 0s infinite; display: inline-block;">rumbling text</tw-hook>
... the CSS within the style property is causing the rumbling effect, and you can use the same CSS within your Story Stylesheet to achieve a similar results.
B, You can use CSS like the following to target two named hooks (named rainbow and rumble) to achieve the effects you want.
tw-hook[name="rainbow"] {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
tw-hook[name="rumble"] {
animation: rumble 0.1s linear 0s infinite;
display: inline-block;
}
... notice that the CSS selectors reference the name of the named hook and that the CSS properties are the same as your original example and the style information generated by the (text-style:) macro. You can test the above CSS using the following markup with a Passage.
The quick brown fox jumped over the lazy dog.
|rainbow>[The quick brown fox jumped over the lazy dog.]
|rumble>[The quick brown fox jumped over the lazy dog.]
|rumble>[|rainbow>[The quick brown fox jumped over the lazy dog.]]
... you will notice that all of the text fades-in during passage transition unlike the example above that includes HTML elements.
The order of the rumble and rainbow named hooks are important when trying to apply both effects to the same section of text, this is why I would suggest creating a combined CSS selector like the following:
tw-hook[name="rumblingrainbow"] {
animation: rumble 0.1s linear 0s infinite;
display: inline-block;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
... which you can use like so:
|rumbling-rainbow>[The quick brown fox jumped over the lazy dog.]
... you may notice that the name of the above named hook (rumbling-rainbow) includes a dash where as the related CSS doesn't, this is because Harlowe automatic removes most punctuation from hook names and also converts the names to all lower case. I include the dash in the markup example because I think it makes it easier to read but you can remove the dash if you want.