CSS过渡效果在取消悬停时的应用

Question

我目前正在尝试制作一个文字，当悬停时会变成彩虹颜色，这个功能已经非常好了。唯一的问题是，当你将鼠标移开文本时，它会立即跳回原始颜色，我希望它可以从最后的颜色流畅地淡出到原始颜色，以使它看起来更加平滑。

另外，如果您建议使用其他方法或语言完成此操作，我完全可以接受。

我对过渡效果比较陌生，似乎无法解决这个问题。

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

- SeanByrne

Answer 1

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

内的transition就可以实现所需效果！

- Demerkies

Answer 2

transition属性不会对animation属性产生影响。因此，您无法通过CSS3创建颜色淡出效果。

那么，在鼠标移出时停止动画怎么办：

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

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

- Dolphin_Wood

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

- Connor Wyatt

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

此处有可运行演示

- Roy Sonasish

---

你能再解释一下吗？比如说，当不悬停时，如何停止立即转换？ - Persijn

@Persijin 如果你学习CSS过渡，你就会理解。 - Roy Sonasish