悬停时的 CSS 过渡答案

【问题标题】：CSS Transition when unhovered悬停时的 CSS 过渡
【发布时间】：2015-04-29 07:21:13
【问题描述】：

我目前正在尝试制作在悬停时会在彩虹中改变颜色的文本，并且效果很好，唯一的问题是当您将鼠标从文本上移开时，它会立即跳转到原始颜色，我希望它流畅地从最后一种颜色淡化为原始颜色，因此看起来更平滑。

此外，如果您建议以任何不同的方式或以任何其他语言执行此操作，我完全愿意这样做。

我通常是过渡的新手，我似乎无法弄清楚这一点。

 <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>

【问题讨论】：

标签： html css colors transitions

【解决方案1】：

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

div 中的 transition 会成功！

【讨论】：

【解决方案2】：

transition 属性不会影响animation 属性。所以不能通过css3创建退色效果。

如何在鼠标移出时停止动画：

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

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

【讨论】：

【解决方案3】：

只需将过渡添加到普通 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 过渡是最简单的方法，但如果您想要更多选项，我会查看velocity.js。

【讨论】：

【解决方案4】：

你可以使用过渡

-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

【讨论】：

您能再解释一下吗？比如不悬停时如何停止立即过渡
@Persijin 如果你研究过css转换，你就会明白。