如何在第一个周期结束时暂停 CSS 关键帧动画？答案

【问题标题】：How to pause a CSS keyframe animation when it ends the first cycle?如何在第一个周期结束时暂停 CSS 关键帧动画？
【发布时间】：2012-11-25 19:41:55
【问题描述】：

我正在制作我的第一个 CSS 关键帧动画，我想知道如何在动画完成第一次运行后暂停动画。你可以在这里查看我的网站：http://www.tommaxwell.me，底部的灰色引用有一个悬停动画，你可以看到。但是，一旦动画结束，它就会重置。我应该如何停止它，以便它在完成时保持动画的最终状态？

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

【问题讨论】：

@Mr.Alien：动画不是过渡。即使您的回答建议使用过渡，它们也不是一回事。
@BoltClock ya 我知道这一点，这就是为什么我建议他使用过渡来实现他试图在这里使用动画实现的特定效果，而这里不需要，他想保留悬停状态我猜
@Mr.Alien：您根据答案进行标记，这不是正确的做法。仅基于问题进行标记。
@BoltClock 哦，是的，抱歉，我也添加了 css3 和转换，我原本应该只标记 css3 ...

标签： css css-animations

【解决方案1】：

作为@Mr.外星人回答说，过渡更喜欢这个，但既然你问了 - 可以保持动画中的最后一个状态。

你可以通过添加animation-fill-mode: forwards;来做到这一点

这是demo

这是我的示例中的代码：

HTML

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

CSS

.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;  }
}

如果您想了解“动画填充模式”属性，这里是一个很好的资源。 http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property

【讨论】：

我不知道为什么接受的答案得到了所有的赞成，因为 Chistofer 是真正回答问题的人。

【解决方案2】：

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

Demo

.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;
}

您将无法保留文本的悬停状态，因为您需要使用 JavaScript

【讨论】：

太好了，谢谢！我想我现在明白两者之间的区别了。