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

当前回答

最好的方法似乎是把最终状态放在css的主要部分。就像这里,我把宽度设置为220px,所以它最终变成了220px。但是从0px开始;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

其他回答

实际上没有人带来它,它的工作方式是动画-播放-状态设置为暂停。

-webkit-animation-fill-mode:转发;/* Safari 4.0 - 8.0 */ animation-fill-mode:转发;

浏览器支持

Chrome 43.0 (4.0 -webkit) IE 10 0。 Mozilla 16.0 (5.0 - moi -) 沙法里4。0网络工具 歌剧15.0 -webkit- (12112 .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;
  }
}

最好的方法似乎是把最终状态放在css的主要部分。就像这里,我把宽度设置为220px,所以它最终变成了220px。但是从0px开始;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

今天我了解到填充模式有一个限制。这是来自苹果开发者的消息。传闻是6个左右,但不确定。 或者,你可以将类的初始状态设置为你想要动画结束的方式,然后在/ 0%处将其初始化。

如果你想把这个行为添加到一个动画属性定义中,子属性的顺序如下

Animation-name -默认无

动画持续时间-默认为0

动画计时-函数-默认ease

动画延迟-默认为0

动画-迭代-计数-默认1

动画方向-默认正常

动画-填充模式-你需要设置为转发

动画-播放-状态-默认运行

因此,在最常见的情况下,结果将是这样的

animation: colorchange 1s ease 0s 1 normal forwards;

请参阅MDN文档