How can I combine these two custom styles?

0 votes
asked Mar 8 by zerio920 (720 points)

I just took these two styles from harlowe:

@-webkit-keyframes shudder {
	50% {
		-webkit-transform: translateX(0.2em);
		transform: translateX(0.2em)
@keyframes shudder {
	50% {
		-webkit-transform: translateX(0.2em);
		transform: translateX(0.2em)
.shudder {
	-webkit-animation: shudder linear 0.1s 0s infinite;
	animation: shudder linear 0.1s 0s infinite;
	display: inline-block;

@-webkit-keyframes blinker {
    50% { visibility: hidden; }
@keyframes blinker {
    50% { visibility: hidden; }
.blink {
    -webkit-animation: blinker 1s step-end infinite;
            animation: blinker 1s step-end infinite;

I tried combining them like this:


But it only blinks the text. I'm a novice at CSS so I don't know if there's an obvious conflict between these two that I'm missing, but I'd like to use them both on the same text if possible. Any help is appreciated.

1 Answer

0 votes
answered Mar 8 by idling (10,470 points)
selected Mar 9 by zerio920
Best answer

This works for me:

<span class="blink"><span class="shudder">test</span></span>


commented Mar 8 by greyelf (88,790 points)


The Any dynamic text effect macros for Sugarcube 2.x? thread in the Old Forum Archive may help you if you have other Harlowe style effects you need to covert over to SugarCube 2.x or if you are just looking for other style effects.

warning: It appears that the Usage examples in that thread have been corrupted, although the CSS examples are valid. The following is an corrected version of the Usage examples, including the pulse effect added at the end of the thread..

@@.shadow;This text should have a shadow@@
@@.emboss;This text should be embossed@@
@@.blur;This text should be blurred@@
@@.blurrier;This text should be blurrier@@
@@.smear;This text should be smeared@@
@@.mirror;This text should be mirrored@@
@@.upside-down;This text should be upside-down@@
@@.fade-in-out;This text should fade in and out@@
@@.rumble;This text should be rumbling@@
@@.shudder;This text should be shuddering@@

@@.pulse;This text should pulse once@@


Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.