在最后一帧停止CSS3animation
我有一个4部分的CSS3animation播放点击 – 但animation的最后部分是为了把它从屏幕上。
但是，一旦玩过，它总是会回到原来的状态。 任何人都知道我可以如何阻止它的最后一个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;
有关 canIuse的 MDN和浏览器支持列表的更多信息 。
是不是你的问题，你设置webkitAnimationName回到没有，所以这是重置您的对象的CSS回到它的默认状态。 如果你只是删除重置状态的setTimeout函数，它不会停留在结束的地方吗？
最好的办法似乎把最后的状态在CSS的主要部分。 就像这里，我把宽度设置为220px ，这样它最终变成了220px 。 但是从0px;开始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;} }
我刚刚发布了一个类似的答案，你可能想看看：
http://www.w3.org/TR/css3-animations/#animation-events-
你可以findanimation的各个方面，例如开始和停止，然后，一旦说“停止”事件已经开始，你可以做任何你想要的东西。 我前段时间尝试过，可以工作，但是我想你暂时只能使用webkit（但你可能已经接受了）。 顺便说一句，既然我已经发布了相同的链接2答案，我会提供这个一般性的build议：检查W3C – 他们几乎写规则和描述标准。 另外，webkit开发页面非常关键。
如果要将此行为添加到速记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;
请参阅此处的MDN文档
-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; } }
没有人真正把它带来，它的工作方式是animation播放状态设置为暂停。
今天我学到了你想用填充模式的限制。 这是来自苹果开发。 谣言是*六，但不确定。 或者，您可以将您的类的初始状态设置为您希望animation结束的方式，然后从/ 0％初始化*。
