Links with adjustable css animation length

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

Hi, I’m new to doing css stuff, and recently I’m experimenting to make a QTE like mechanic where the link would change the color before disappearing and maybe show some text like “ah you missed it”. The timing on individual links can be changed to fit different situations.

I asked a friend to help, but for every problem we solve a new one pops up. I feel like that the problems might be actually easy to fix, and we just lack experience, so I’m asking here.

This is what we tried:

The animation in css has the default length of 5 sec, and “qte a” class uses it.

.qte a{
	animation: qte 5s linear;
}

@keyframes qte{
  0% {color: #FF3D27;}
  20% {color: #D9220E;}
  50% {color: #8D0E00;}
  95% {color: #4F0902;}
  100% {color: black;}
}

In this case I want to change the animation to 10 seconds for this passage.
First we tried changing the animation length in < span >

<span id="QTE" class="qte a" style="animation: qte 10s;"> 
[[This is a QTE link that will disappear in 10 seconds|Next passage]] 
</span>

<<timed 10s>>
 <<replace "#QTE">>ah you missed it<</replace>>
<</timed>>

We found that everything worked except that it won’t change the css animation length.
Then, we tried creating the link in < a >

<a id="QTE" data-passage="Next Passage" style="animation: qte 10s;">
This is a QTE link that will disappear in 10 seconds
</a>

<<timed 10s>>
<<replace "#QTE">>ah you missed it<</replace>>
<</timed>>

This time the animation length changed, but the “ah you missed it” text also becomes a link.

Any help would be appreciated!

2

Sure, I can see a couple of things you’re missing. Your css rule is for the selector .qte a which applies to <a> tags that are nested inside (possibly many levels inside) a tag with the qte class. So it’s not a “qte a” class.

So in your first example, class="qte a" is giving the <span> two classes, “qte” and “a” (which is ignored). But the real reason this one doesn’t work is that you’re putting the 10 second inline animation style on the <span>, but the link is still animated using the stylesheet rule (which is 5 seconds).

In your second example, the link is not wrapped inside a “qte” class element, so the stylesheet rule won’t apply, but you’re giving it an inline style, so the animation works fine. The problem here is that you’re replacing the text of the link (so it’s still a link), rather than replacing the contents of the span (including the entire link) with a piece of text.

So you sort of need both:

<span id="QTE"><a data-passage="Next Passage" style="animation: qte 10s">
This is a QTE link that will disappear in 10 seconds
</a></span>

<<timed 10s>>
 <<replace "#QTE">>ah you missed it<</replace>>
<</timed>>

And then you don’t need the .qte a CSS rule, just the keyframes.

That works for me, though there may be a less verbose way to do it…

3

Thanks! That’s basically what I want to achieve.