I’m having trouble wrapping my brain around a transition effect I want.
I have some text inside a div. I want the last few words of the text to start out invisible and slowly appear. I figure I could use a span on the last few words and then either transition the color of the text (from the same as its background to the desired final color), or transition the text’s visibility from hidden to visible.
But I want 3 other things with this:
1) It must start automatically, without an initiating event like hover.
2) It must then remain in the final state, not reverting to the initial state as happens with hover.
If this is possible, could some kind soul explain how to do it?
I appreciate the quick replies, folks. Before seeing them, I managed to get the effect I wanted, except that it uses hover so reverts when unhovered. Turns out that my shorthand declarations weren’t quite right – when I redid them longhand, it worked as I expected.
Hadn’t considered using keyframe animations – it’ll take me some time to get a handle on that. Thanks for the jsfiddle to get me started.
And the linked article (at GreyWyvern.com) is very helpful – thanks for that too.