css3动画动一次就停止,css

css - 在最后一帧停止CSS3动画

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下。

但是，它一旦播放就会回到原来的状态。 任何人都知道如何在最后一个css帧(100％)上停止它，或者如何摆脱它曾经玩过的整个div。

@keyframes colorchange {

0% { transform: scale(1.0) rotate(0deg); }

50% { transform: rotate(340deg) translate(-300px,0px) }

100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }

}

8个解决方案

321 votes

您正在寻找：

animation-fill-mode: forwards;

有关canIuse上的MDN和浏览器支持列表的更多信息。

Duopixel answered 2019-04-29T17:42:05Z

14 votes

如果要将此行为添加到简写animation属性定义中，子属性的顺序如下

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 您需要将此项设

css3动画动一次就停止,css

css - 在最后一帧停止CSS3动画

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下。

但是，它一旦播放就会回到原来的状态。 任何人都知道如何在最后一个css帧(100％)上停止它，或者如何摆脱它曾经玩过的整个div。

@keyframes colorchange {

0% { transform: scale(1.0) rotate(0deg); }

50% { transform: rotate(340deg) translate(-300px,0px) }

100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }

}

8个解决方案

321 votes

您正在寻找：

animation-fill-mode: forwards;

有关canIuse上的MDN和浏览器支持列表的更多信息。

Duopixel answered 2019-04-29T17:42:05Z

14 votes

如果要将此行为添加到简写animation属性定义中，子属性的顺序如下

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 默认running

animation-play-state - 您需要将此项设