悬停后，渐变动画在循环中保持颜色

Question

好奇，在悬停并激活彩虹动画后，我如何让 h1 文本的颜色在循环中保持当前颜色！

h1 {
margin: 0;
font-size: 5em;
color: #00f;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
h1:hover{  
-webkit-animation: rainbow 10s infinite; 
}
@-webkit-keyframes rainbow{
20%{color: red;  left 600ms 3s, top 1.5s 3s;} 
40%{color: yellow;  left 600ms 3s, top 1.5s 3s;}
60%{color: green;  left 600ms 3s, top 1.5s 3s;}
80%{color: orange;  left 600ms 3s, top 1.5s 3s;}
100%{color: blue;  left 600ms 3s, top 1.5s 3s;} 

Answer 1

您可以

像这样依赖animation-play-state属性：

h1 {
  margin: 0;
  font-size: 5em;
  color: #00f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  animation: rainbow 10s infinite;
  animation-play-state: paused;
}
h1:hover {
  animation-play-state: running;
}
@keyframes rainbow {
  20% {
    color: red;
  }
  40% {
    color: yellow;
  }
  60% {
    color: green;
  }
  80% {
    color: orange;
  }
  100% {
    color: blue;
  }

<h1>SOME TEXT</h1>