Struggling with a transition

[snillor]

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.
3) This must be done entirely with CSS – no jquery or other JavaScript.

If this is possible, could some kind soul explain how to do it?

[Senff]

This one has all your requirements: http://jsfiddle.net/senff/KE7ct/1/

However, like @robskiwarrior says, you’re definitely going to have issues with older browsers.

[snillor]

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.

The reason for avoiding JavaScript is simply because I have zero experience with it. If I’m having trouble with something as basic as CSS transitions, I’ll really be lost with JavaScript. Yes, this means issues with older browsers, but until I’m comfortable with JavaScript, that’s OK. I’ve come to believe that it’s perfectly fine if pages look different in different browsers; and as long as the pages function well, it’s OK if older browsers don’t show all the bells & whistles.

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.

[snillor]

Such a short script – that does look ridiculously easy, if one knows enough to write it correctly.

Thanks.

[Author]

Posts