在最后一帧停止 CSS3 动画 [英] Stopping a CSS3 Animation on last frame

问题描述

我有一个由 4 部分组成的 CSS3 动画在点击时播放 - 但动画的最后一部分是为了将其从屏幕上移除.

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.

但是，一旦播放完毕，它总是会恢复到原来的状态.任何人都知道我如何在它的最后一个 css 帧 (100%) 停止它，或者如何在它播放后摆脱它所在的整个 div.

However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.

@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); }
}

推荐答案

您正在寻找:

animation-fill-mode: forwards;

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

More info on MDN and browser support list on canIuse.

这篇关于在最后一帧停止 CSS3 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！