停止在最后一帧上的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 - 违约 none

animation-duration - 违约 0s

animation-timing-function - 违约 ease

animation-delay - 违约 0s

animation-iteration-count - 违约 1

animation-direction - 违约 normal

animation-fill-mode - 你需要把这个设置为 forwards

animation-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.0

• Mozilla 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;
  }}