停止在最后一帧上的CSS 3动画

Question

停止在最后一帧上的CSS 3动画

我有一个4部分CSS 3动画播放点击-但最后一部分动画意味着把它从屏幕上。

然而，它总是回到原来的状态，一旦它发挥。谁知道我怎么能停止它的最后一个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;

Answer 2

如果要将这种行为添加到速记中animation属性定义，子属性的顺序如下animation-name - 违约 noneanimation-duration - 违约 0sanimation-timing-function - 违约 easeanimation-delay - 违约 0sanimation-iteration-count - 违约 1animation-direction - 违约 normalanimation-fill-mode - 你需要把这个设置为 forwardsanimation-play-state - 违约 running因此，在最常见的情况下，结果会是这样的animation: colorchange 1s ease 0s 1 normal forwards;

Answer 3

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */animation-fill-mode: forwards;浏览器支持Chrome 43.0(4.0-webkit-)IE 10.0Mozilla 16.0(5.0-Moz-)Shafari 4.0-webkit-Opera 15.0-webkit-(12.112.0-o)用途：-.fadeIn {   animation-name: fadeIn;     -webkit-animation-name: fadeIn;     animation-duration: 1.5s;     -webkit-animation-duration: 1.5s;     animation-timing-function: ease;     -webkit-animation-timing-function: ease;      animation-fill-mode: forwards;     -webkit-animation-fill-mode: forwards;}@keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   }}@-webkit-keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   }}