Hey!
I could really use some help with this. When entering a passage, I want some text to slowly fade until gone, and stay hidden.
I know this is a simple task but I can't for the life of me find a simple solution to it. Everything I find is either triggered by hovering the mouse over the text, and/or the text returns. I'm on SugarCube 2.
I thought this in the stylesheet would work, but it just hides the text immediately from the start.
.fade {
opacity: 0;
transition: 5s all ease;
}
Comments
The keyframes define the animation progress from 0% to 100%. It starts off at 1 opacity at 0% and then goes to 0 and is hidden at 100%, so a fadeout.
The two types of animation are one for webkit browsers (chrome etc) and the rest.
fadeOut is the name I gave to the keyframes, that just tells the animation to refer to that one. 5s is the time. 1 tells it to only perform the animation once. Forwards tells it to hold the animation at the end state rather than revert to the beginning.