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

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>