如何停止 CSS 关键帧动画？

Question

我有一个关键帧动画，它会在某些事件发生后改变颜色，但我不知道如何在事件结束后停止动画？

HTML（只是调用事件）：

<div id="prt1"></div>
<div id="prt2"></div>
<div id="prt3"></div>

CSS（只是样式和关键帧动画）：

#prt1 {
height:20%;
width:5%;
border:1px solid black;
top:50%;
left:0%;
animation:prt1 2s infinite;
-webkit-animation:prt1 2s infinite;
display:none;
}

@keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

@-webkit-keyframes prt1 {
0% {background-color:white;}
33% {background-color:black;}
66% {background-color:white;}
100% {background-color:white;}
}

#prt2 {
height:30%;
width:5%;
border:1px solid black;
left:0%;
top:50%;
animation:prt2 2s infinite;
-webkit-animation:prt2 2s infinite;
display:none;
}

@keyframes prt2 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:black;}
100% {background-color:white;}
}

@-webkit-keyframes prt2 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:black;}
100% {background-color:white;}
}

#prt3 {
height:49%;
width:5%;
border:1px solid black;
left:0%;
top:50%;
animation:prt3 2s infinite;
-webkit-animation:prt3 2s infinite;
display:none;
}

@keyframes prt3 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:white;}
100% {background-color:black;}
}

@-webkit-keyframes prt3 {
0% {background-color:white;}
33% {background-color:white;}
66% {background-color:white;}
100% {background-color:black;}
}

Answer 1

您需要设置

animation-iteration-count

：

animation-iteration-count: 1;

更多详情，请看：
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

...和：
http://css-tricks.com/snippets/css/keyframe-animation-syntax/

您提供的有关问题的信息非常有限。此解决方案可能不是您正在寻找的。为您的问题添加更多细节，如有必要，我会更新此答案。

供应商前缀：您可以添加供应商前缀（-webkit-、-moz-、-o-），例如

-webkit-animation-iteration-count: 1;

browser support 并针对允许为它们设置自定义值的特定浏览器。

Answer 2

.class {
	animation: rotation 1s forwards;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}

无限的反义词是向前。

Answer 3

有点合并@user7253564 和@MarkusHofmann 的答案。对于将来访问这里的任何人。

对我的案例有用的是：

.fade {
    animation: fade 1.5s forwards;
}

animation-iteration-count: 1

在关键帧完成后无法停止动画。

而不是

animation-iteration-count

，您应该使用

animation-fill-mode: forwards;

在关键帧循环结束后停止动画。

查看

animation

属性的 MDN 参考here

查看

animation-fill-mode

属性的 MDN 参考here

我希望这可以帮助需要它的人。

Answer 4

在我的例子中，我使用了

animationPlayState

属性来暂停它。

$("#animatedDiv").css("animationPlayState","paused");