Grow your CSS skills. Land your dream job.

Struggling with a transition

  • # March 12, 2012 at 10:06 am

    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?

    Rob
    # March 12, 2012 at 10:30 am

    Is there a huge reason why it can’t be with javascript? Just because you are going to have issues with non-CSS3 browser people anyway…

    you could have a look at this: http://www.greywyvern.com/?post=337

    # March 12, 2012 at 10:32 am

    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.

    # March 12, 2012 at 11:02 am

    Yes, it’s possible with a css animation. See here: http://dabblet.com/gist/2022500
    EDIT: Whoops, I didn’t see that this had already been posted.

    Rob
    # March 12, 2012 at 11:04 am

    nice @Senff :D

    # March 12, 2012 at 1:06 pm

    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.

    Rob
    # March 13, 2012 at 4:17 pm

    @snillor just wanted to show you how easy it is with jQuery (and works cross browser) :)

    http://jsfiddle.net/jAThH/

    # March 13, 2012 at 11:03 pm

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

    Thanks.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".