[Twine 1 / SugarCube] Fade in text inside a passage on load?

Geralt · April 2017

I've arranged the text of a passage inside a table. Now, I want the text inside one cell to fade in on load - the best would be one paragraph after another. I've added this script to my Stylesheet passage (body), which I copied from a tutorial website about simple CSS effects:

#fadeintext p {

-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

Sadly, declaring a paragraph as a <div id="fadeintext"> does nothing. I'm using the latest SugarCube. Is there another way? What am I doing wrong? (Yes, I'm not very techy at all when it comes to HTML/CSS - sorry about that.)

TheMadExile · April 2017

First. In the future, if you're asking for help with code, post the whole unadulterated code itself, not parts of it, not screenshots of it, etc. When you do, please use the code tag—it's C on the editor bar—when posting code or markup, rather than the quote tag.

If you're doing something like the following:

<div id="fadeintext">Some text.</div>

Then your #fadeintext selector should probably be something like the following:

#fadeintext

Rather than your existing:

#fadeintext p

Geralt · April 2017

Pls don't talk to me like that.

Otherwise, thank you for the information.

Howdy, Stranger!

Categories

[Twine 1 / SugarCube] Fade in text inside a passage on load?

Comments