在最后一帧上停止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 。

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