CSS transition on open
I am currently trying to make a text that changes color in a rainbow on hover and it works really well, only the problem is when you remove the mouse from the text that immediately goes to the original color and I would like it fade from the last color to the original, so it looks much smoother.
Also, if you would recommend doing it in any other way or in any other languages, I am completely open to it.
I'm generally new to transitions and I can't seem to figure it 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>
+3
source to share
4 answers
Just add a transition to 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 this, but if you want more options I would take a look at speed.js.
+2
source to share