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

Question

我有一个 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); }
}

Answer 1

您正在寻找:

animation-fill-mode: forwards;

More info on MDN和浏览器支持列表 canIuse .