I’m trying to figure out how to fade between two passages that use different background colors and text colors. I’m sure there’s a simple solution I’m not seeing. I’m changing the style between my passages by having each passage set to a different tag, and that tag determines it’s style. I thought maybe adding “transition: background 2s, color 2s;” to each of the tag definitions in the stylesheet would make it fade when switching, but that didn’t seem to do it.
So the colors change correctly, it just doesn’t fade? Does it work if you fade the text and background out to black, then fade in the new background color and text just after that?
Someone with more knowledge will likely know better, but my gut instinct is somehow the background color mechanism is separate from the text fade mechanism. I’m picturing it like two lamps controlled by switches across the room - one person can’t reach both switches at once, so you can’t turn both lamps on or off at exactly at the same time. I suspect the engine doesn’t have enough “hands” to do this all together at once. To complete the transition within the specified 2 second delay, one of the elements (say the background) is crossfaded for 2 seconds, and by the time it reaches the instruction to also crossfade the text, the 2 seconds is over so you see no fade.
I could be totally wrong here and hopefully someone will provide a simple solution.
I was trying to accomplish this myself a bit ago, and what I came up with in the end was:
tw-story[tags~="fadein"] {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
…which wasn’t exactly what I wanted, as it doesn’t fade smoothly from one color to the other, but flashes white in between before fading in the new passage, like this:
But I couldn’t figure out any way to do a smooth fade from one to the other.
1 Like
A little research points to this question
HTH
I did try this, it didn’t work unfortunately. I mentioned using transitions in my original post.
1 Like