Change transition ?

0 votes
asked Oct 11, 2017 by Seyru (630 points)

Hello there, I'm having an issue that's probably really basic to the most of you !

I'd like to change the transition time of the <<timed t8n>> macro ! 

I know you're supposed to do that in your stylesheet, but although I'm reading old topics using transition, I can't figure how to do it properly. (I've read this : here, and I almost get what you're supposed to do, but what do I write instead of the <div> ?)

Thanks a lot guys <3

1 Answer

0 votes
answered Oct 11, 2017 by TheMadExile (50,290 points)
selected Oct 12, 2017 by Seyru
 
Best answer

The style rule that handles transitions for the <<timed>> macro is based on the class selector .macro-timed-insert (from: core-macro.css at SugarCube v2 CSS > Built-in Stylesheets).

 

To change the duration of the transition for all <<timed>> invocations, simply add something like the following rule to your Story Stylesheet, which changes the duration from the default 400ms to 1s:

.macro-timed-insert {
	transition-duration: 1s;
}

 

To change the duration of the transition only for select <<timed>> invocations, add something like the following rule to your Story Stylesheet, which changes the duration from the default 400ms to 1s for any <<timed>> which is wrapped within an element containing the class slow.

.slow .macro-timed-insert {
	transition-duration: 1s;
}

And wrapping <<timed>>:

/* Using HTML. */
<span class="slow"><<timed … t8n>>…<</timed>></span>

/* Using custom styles markup. */
@@.slow;<<timed … t8n>>…<</timed>>@@

 

commented Oct 12, 2017 by Seyru (630 points)
Perfect, as always !
Thanks a lot !
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.
...