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>

Answer 1

 http://xx.xx.xx.xx:8080/gitlab/build_now

.logo { font-size: 100px; margin-top: 10px; margin-bottom: 5px; margin-right: auto; margin-left: auto; color: #FF006E; transition: color 2s; }内的transition会欺骗他人！

Answer 2

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

如何在mouseout上停止动画：

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

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

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。

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;

working demo here

CSS转换时没有发现

4 个答案: