如何停止 CSS 关键帧动画？

Posted 2023-03-06

【中文标题】如何停止 CSS 关键帧动画？

【英文标题】：How can I stop a CSS keyframe animation?

【发布时间】：2013-08-12 14:01:43

【问题描述】：

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

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;

【问题讨论】：

请发布一些代码，以便我们更好地了解您的问题。

Be specific - 如果你问一个模糊的问题，你会得到一个模糊的答案。但是，如果您向我们提供详细信息和上下文，我们可以提供有用的答案。那么，你尝试过什么？ 显示一些代码！

@MarkusHofmann 刚刚用一些代码更新了帖子。

【参考方案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 并针对特定浏览器，允许为其设置自定义值。

【讨论】：

还有 -webkit-animation-iteration-count 用于 webkit。

【参考方案2】：

.class 
	animation: rotation 1s forwards;


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

无限的反义词是向前。