如何停止 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;}
}

原文由 David Corbin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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; 以 支持浏览器 并针对特定浏览器，允许为其设置自定义值。_

原文由 Markus Hofmann 发布，翻译遵循 CC BY-SA 3.0 许可协议