如何在CSS关键帧动画结束第一个循环时暂停它？

我正在制作我的第一个CSS关键帧动画，我想知道如何在动画完成第一次运行后暂停动画。你可以在这里查看我的网站：底部的灰色引号有一个悬停动画，你可以看到。但是，动画结束后将重置。我应该如何停止它，使它在动画结束时保持在动画的结束状态

---

我知道在这种情况下使用关键帧动画有点蹩脚和不必要，但我只是在测试关键帧，以后会更好地使用它。：）

我知道您在这里做什么，请改用CSS

transition

---

您将无法保留文本的悬停状态，因为@Mr.Alien回答时，您需要使用JavaScript，因此更倾向于使用转换，但由于您提出了要求，因此可以保留动画中的最后一个状态

通过添加

动画填充模式：向前

这里有一个

下面是我的示例中的代码：

HTML

如果您想了解“动画填充模式”属性，这里有一个很好的资源。
@Mr.Alien:动画不是过渡。即使你的答案建议使用转场，但它们不是一回事。@BoltClock ya我知道，这就是为什么我建议他使用转场来实现他试图在这里通过动画实现的特定效果，而这在这里是不需要的，他想保持我的悬停状态guess@Mr.Alien：您正在根据答案进行标记，这不是正确的方法。仅基于问题进行标记。@BoltClock哦，是的，对不起，我也添加了css3和转换，我原本只想标记css3…太好了，谢谢！我想我现在明白了两者之间的区别。我不知道为什么被接受的答案得到了所有的赞成票，因为奇斯托弗才是真正回答这个问题的人。
.class {
   color: #ff0000;
   transition: color 2s;
   -moz-transition: color 2s; /* Firefox 4 */
   -webkit-transition: color 2s; /* Safari and Chrome */
   -o-transition: color 2s; /* Opera */
}

.class:hover {
   color: #00ff00;
}

<div class="text">Hover here</div>​

.text {
  color: blue;  
}

.text:hover {
    -webkit-animation: color 1.0s ease-in forwards;
       -moz-animation: color 1.0s ease-in forwards;
         -o-animation: color 1.0s ease-in forwards;
            animation: color 1.0s ease-in forwards;    
}

@-webkit-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-moz-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@-o-keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}

@keyframes color {
  0%   { color: blue; } 
  100% { color: red;  }
}