CSS Transition when unhovered

Question

I currently am trying to make text that will change color in a rainbow on hover and it's working very well, only issue is when you take your mouse off of the text it immediately jumps to the original color and I would like it to fluidly fade from the last color into the original one so it looks much smoother.

Also, if you would recommend doing this any different way or in any other languages I am completely open to doing that.

I'm generally new to transitions and I can't seem to figure this out.

 <style>
    .logo {
        font-size: 100px;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-right: auto;
        margin-left: auto;
        color: #FF006E;
    }
    .logo:hover {
        -webkit-animation:logo 1s infinite;
        -ms-animation:logo 1s infinite;
        -o-animation:logo 1s infinite;
        animation:logo 1s infinite;
    }
    @-webkit-keyframes logo {
    0% {color: #ff0000;}
    10% {color: #ff8000;}
    20% {color: #ffff00;}
    30% {color: #80ff00;}
    40% {color: #00ff00;}
    50% {color: #00ff80;}
    60% {color: #00ffff;}
    70% {color: #0080ff;}
    80% {color: #0000ff;}
    90% {color: #8000ff;}
    100% {color: #ff0080;}
    }
    @-ms-keyframes logo {
    0% {color: #ff0000;}
    10% {color: #ff8000;}
    20% {color: #ffff00;}
    30% {color: #80ff00;}
    40% {color: #00ff00;}
    50% {color: #00ff80;}
    60% {color: #00ffff;}
    70% {color: #0080ff;}
    80% {color: #0000ff;}
    90% {color: #8000ff;}
    100% {color: #ff0080;}
    }
    @-o-keyframes logo {
    0% {color: #ff0000;}
    10% {color: #ff8000;}
    20% {color: #ffff00;}
    30% {color: #80ff00;}
    40% {color: #00ff00;}
    50% {color: #00ff80;}
    60% {color: #00ffff;}
    70% {color: #0080ff;}
    80% {color: #0000ff;}
    90% {color: #8000ff;}
    100% {color: #ff0080;}
    }
    @keyframes logo {
    0% {color: #ff0000;}
    10% {color: #ff8000;}
    20% {color: #ffff00;}
    30% {color: #80ff00;}
    40% {color: #00ff00;}
    50% {color: #00ff80;}
    60% {color: #00ffff;}
    70% {color: #0080ff;}
    80% {color: #0000ff;}
    90% {color: #8000ff;}
    100% {color: #ff0080;}
    }
    </style>

    <div class="logo">
    I am RainbowText! Fear me! :D
    </div>

Answer 1

    .logo {
    font-size: 100px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
    color: #FF006E;
    transition: color 2s;
}

The transition inside the div will do he trick!

Answer 2

transition property won't have effect on the animation property. So you can't create a color fading back effect through css3.

What about stopping the animation on mouseout:

.logo {
    animation: logo 1s infinite;
    animation-play-state: paused;
}

.logo:hover {
    animation-play-state: running;
}

Answer 3

Just add the transition to the normal CSS

<style>
    .logo {
        -webkit-animation:logo 1s infinite;
        -ms-animation:logo 1s infinite;
        -o-animation:logo 1s infinite;
        animation:logo 1s infinite;
        font-size: 100px;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-right: auto;
        margin-left: auto;
        color: #FF006E;
    }
</style>

CSS transitions are the easiest way to do it but if you want more options I would look into velocity.js.

Answer 4

you can use transition

-webkit-transition: all .30s ease-in;
-moz-transition:    all .30s ease-in;
-o-transition:      all .30s ease-in;
-ms-transition:     all .30s ease-in;   
transition:         all .30s ease-in;

working demo here