How can I combine these two custom styles?

Question

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:

@@.blink;.shudder;text@@

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.

Answer 1

This works for me:

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

 

Comments

@zerio920

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@@