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

你正在寻找:

animation-fill-mode: forwards;

更多关于MDN和浏览器支持列表的信息在canIuse。


不是你的问题,你设置webkitAnimationName回到什么,所以这是重置CSS为你的对象回到它的默认状态。如果你移除重置状态的setTimeout函数,它不会停留在原来的位置吗?


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


我刚刚发布了一个类似的答案,你可能想看看:

http://www.w3.org/TR/css3-animations/#animation-events-

You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.


最好的方法似乎是把最终状态放在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;}
}  

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

Animation-name -默认无

动画持续时间-默认为0

动画计时-函数-默认ease

动画延迟-默认为0

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

动画方向-默认正常

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

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

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

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

请参阅MDN文档


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

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