如何停止CSS关键帧动画？

nlejzf6q 于 2023-03-05 发布在其他

关注(0)|答案(4)|浏览(330)

我有一个关键帧动画，改变颜色后，某些事件，但我不知道如何停止动画后，事件完成？
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;}
}

css

来源：https://stackoverflow.com/questions/18166999/how-can-i-stop-a-css-keyframe-animation

4条答案

按热度按时间

wyyhbhjk1#

您需要设置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;，以获得浏览器支持，并针对特定浏览器设置自定义值。*

赞(0）回复(0）举报 2023-03-05

1szpjjfi2#

.class {
	animation: rotation 1s forwards;
}

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

无限的反义词是向前。

赞(0）回复(0）举报 2023-03-05

siotufzp3#

把@user7253564和@MarkusHofmann的答案合并起来。对于将来访问这个网站的人。
对我的案例有效的方法是：

.fade {
    animation: fade 1.5s forwards;
}

animation-iteration-count: 1无法在关键帧结束后停止动画。
应使用animation-fill-mode: forwards;而不是animation-iteration-count在关键帧循环结束后停止动画。
有关animation属性here的信息，请参见MDN参考
有关animation-fill-mode属性here，请参见MDN参考
希望这能帮助到需要帮助的人。