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:
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.)
#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.)