How to have multiple CSS color transitions on a single text line?

Question

I'm trying to modify the text's color when hover with multiple color transitions but I can only change one color. Here is my CSS snippet.

#text       {font:9px 'Arial'; color:#000000; transition-duration: 3s;}
#text:hover {color:#FFFFFF;}

Not just #000000 to #FFFFFF, but #000000→#FF0000→#0000FF→#FFFFFF

what exactly do you want to happen? I'm assuming that is what you've gotten to currently work. — kalley, Nov 15 '13 at 17:55
possible duplicate of [How to have multiple CSS transitions on an element?](http://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) .. are you sure you aren't looking for an animation... a transition just changes something to -> from. — Josh Crozier, Nov 15 '13 at 17:57

score 5 · Accepted Answer · answered Nov 15 '13 at 18:11

5

You need to use CSS Animations which allow you to use keyframes to define multiple state changes.

Your example would look like this:

#text:hover {
    animation: 3s multicolor;
}
@keyframes multicolor {
    0% {
        color: #000;
    }
    33% {
        color: #FF0000;
    }
    66% {
        color: #0000FF;
    }
    100% {
        color: #FFF;
    }
}

Here's a demo fiddle that includes the -webkit prefix (omitted in the answer for brevity)

answered Nov 15 '13 at 18:11

omma2289

54,161
8
64
68

Thanks! But I've just got a problem. If I unhover it, it recovers instantly. How do I fix this? – Guinea Pig Nov 15 '13 at 18:48
@user2190490 this is not supported on many browsers but javascript it is – Hichem Nov 15 '13 at 18:54

score 2 · Answer 2 · answered Nov 15 '13 at 17:58

I would suggest checking out animation keyframes for CSS animations. You are able to specify the state of your text at whatever intervals you like (in this case, define your text color). W3 Schools has more info on the subject, take a look here: http://www.w3schools.com/css/css3_animations.asp

How to have multiple CSS color transitions on a single text line?

2 Answers2