我怎样才能停止CSS关键帧动画？ [英] How can I stop a CSS keyframe animation?

问题描述

我有一个关键帧动画某些事件发生后改变颜色，但我无法弄清楚如何将事件完成后停止动画？

HTML（只需调出事件）：

 ＆LT; D​​IV ID =PRT1＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =PRT2＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =PRT3＆GT;＆LT; / DIV＆GT;
 

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

 ＃{PRT1
高度：20％;
宽度：5％;
边框：1px的纯黑色;
顶部：50％;
左：0％;
动画：PRT1 2S无限;
-webkit-动画：PRT1 2S无限;
显示：无;
}@keyframes PRT1 {
0％{背景颜色：白色;}
33％{背景颜色：黑色;}
66％{背景颜色：白色;}
100％{背景颜色：白色;}
}@ -webkit-关键帧PRT1 {
0％{背景颜色：白色;}
33％{背景颜色：黑色;}
66％{背景颜色：白色;}
100％{背景颜色：白色;}
}＃{PRT2
高度：30％;
宽度：5％;
边框：1px的纯黑色;
左：0％;
顶部：50％;
动画：PRT2 2S无限;
-webkit-动画：PRT2 2S无限;
显示：无;
}@keyframes PRT2 {
0％{背景颜色：白色;}
33％{背景颜色：白色;}
66％{背景颜色：黑色;}
100％{背景颜色：白色;}
}@ -webkit-关键帧PRT2 {
0％{背景颜色：白色;}
33％{背景颜色：白色;}
66％{背景颜色：黑色;}
100％{背景颜色：白色;}
}＃{PRT3
高度：49％;
宽度：5％;
边框：1px的纯黑色;
左：0％;
顶部：50％;
动画：PRT3 2S无限;
-webkit-动画：PRT3 2S无限;
显示：无;
}@keyframes PRT3 {
0％{背景颜色：白色;}
33％{背景颜色：白色;}
66％{背景颜色：白色;}
100％{背景颜色：黑色;}
}@ -webkit-关键帧PRT3 {
0％{背景颜色：白色;}
33％{背景颜色：白色;}
66％{背景颜色：白色;}
100％{背景颜色：黑色;}
}
 

解决方案

您需要设置动画迭代计数：

动画迭代计数：1;


有关详细信息，看一看：结果
https://developer.mozilla.org/en-US /文档/网络/ CSS /动画迭代计数

...和：结果
http://css-tricks.com/snippets/css/keyframe-animation-语法/

您已经提供了有关您的问题非常有限的信息。这种解决方案可能不是你在寻找什么。添加一些更详细你的问题，如果有必要，我会更新这个答案。

厂商prefixes：您可以添加厂商prefixes（-webkit-，-moz-，-O-）例如像 -webkit-动画迭代计数：1; 的<一个href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count#Browser_Compatibility\"相对=nofollow>浏览器支持并针对特定的浏览器，允许为他们设置自定义值。的

I have a keyframe animation that changes color after certain events but I can't figure out how to stop the animation after the event is done?

HTML (just to call up the events):

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

CSS (just the styles and keyframe animations):

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

解决方案

You need to set the animation-iteration-count:

animation-iteration-count: 1;

For more details, have a look at:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

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

You've provided very limited information about your problem. This solution might not be exactly what you're looking for. Add some more detail to your question and I'll update this answer if necessary.

Vendor Prefixes: You may add vendor prefixes (-webkit-, -moz-, -o-) like e.g. -webkit-animation-iteration-count: 1; for browser support and to target specific browsers allowing to set custom values for them.

这篇关于我怎样才能停止CSS关键帧动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！