blocks|key|3220245|text|你要找的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3220246|animation-fill-mode:+forwards;|code-block|syntax|javascript|3220247|canIuse上的More+info+on+MDN和浏览器支持列表。|offset|length|3220248|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=css-animation|1|https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode^0|0|0|0|7|0|9|G|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

You're looking for:

<pre><code>animation-fill-mode: forwards;
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode" rel="noreferrer">More info on MDN</a> and browser support list on <a href="http://caniuse.com/#feat=css-animation" rel="noreferrer">canIuse</a>.

blocks|key|3220262|text|将webkitAnimationName重新设置为空不是您的问题，因此将对象的CSS重置为其默认状态不是您的问题。如果只删除重置状态的setTimeout函数，它不会停留在原来的位置吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3220263|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?

blocks|key|3220282|text|我今天了解到，对于fill-mode，您需要使用一个限制。这是来自一位苹果开发人员的。传言大约有六个，但还不确定。或者，您可以将类的初始状态设置为您希望动画结束的方式，然后将其初始化为/+0%25。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3220283|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .

blocks|key|289709|text|我刚刚发布了一个类似的答案，你可能想看看：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|289710|http://www.w3.org/TR/css3-animations/#animation-events-|offset|length|289711|你可以找出动画的各个方面，比如开始和停止，然后，一旦'+stop‘事件被触发，你就可以对dom做任何你想做的事情。我前段时间试过了，它可以工作，但我猜你暂时只能使用webkit+(但你可能已经接受了这一点)。顺便说一句，因为我已经发布了两个答案的相同链接，所以我提供了这个一般性的建议:查看W3C+-他们几乎编写了规则并描述了标准。此外，webkit开发页面非常关键。|289712|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

I just posted a similar answer, and you probably want to have a look at:

<a href="http://www.w3.org/TR/css3-animations/#animation-events-" rel="nofollow">http://www.w3.org/TR/css3-animations/#animation-events-</a>

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.

blocks|key|288826|text|最好的方法似乎是将最终状态放在css的主要部分。就像这里，我把宽度赋值给220px，这样它最终就变成了220px。但是开始使用0px;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288827|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;}
}++|code-block|syntax|javascript|288828|entityMap^0|10|5|1F|5|1R|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

The best way seems to put the final state at the main part of css. Like here, i put width to <code>220px</code>, so that it finally becomes <code>220px</code>. But starting to <code>0px;</code>

<pre><code>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;}
} 
</code></pre>

blocks|key|3220468|text|如果要将此行为添加到速记animation属性定义中，则子属性的顺序如下|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3220469|animation-name+-默认none|3220470|animation-duration+-默认0s|3220471|animation-timing-function+-默认ease|3220472|animation-delay+-默认0s|3220473|animation-iteration-count+-默认1|3220474|animation-direction+-默认normal|3220475|animation-fill-mode+-您需要将其设置为+forwards|BOLD|3220476|animation-play-state+-默认running|3220477|因此，在最常见的情况下，结果将如下所示|3220478|animation:+colorchange+1s+ease+0s+1+normal+forwards;|code-block|syntax|javascript|3220479|请参阅MDN+documentation+here|3220480|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/CSS/animation^0|C|9|0|0|E|I|4|0|0|I|M|2|0|0|P|T|4|0|0|F|J|2|0|0|P|T|1|0|0|J|N|6|0|0|J|U|8|L|8|0|0|K|O|7|0|0|0|3|M|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|25|8|@$9|26|A|27|B|C]|$9|28|A|29|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|2A|8|@$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|T]]|D|@]|E|$]]|$1|U|3|V|5|6|7|2H|8|@$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|2M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|2N|8|@]|D|@]|E|$11|12]]|$1|13|3|14|5|6|7|2O|8|@]|D|@$9|2P|A|2Q|1|2R]]|E|$]]|$1|15|3|-4|5|6|7|2S|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]]]

If you want to add this behaviour to a shorthand <code>animation</code> property definition, the order of sub-properties is as follows

<code>animation-name</code> - default <code>none</code>

<code>animation-duration</code> - default <code>0s</code>

<code>animation-timing-function</code> - default <code>ease</code>

<code>animation-delay</code> - default <code>0s</code>

<code>animation-iteration-count</code> - default <code>1</code>

<code>animation-direction</code> - default <code>normal</code>

<code>animation-fill-mode</code> - you need to set this to <code>forwards</code>

<code>animation-play-state</code> - default <code>running</code>

Therefore in the most common case, the result will be something like this

<pre><code>animation: colorchange 1s ease 0s 1 normal forwards;
</code></pre>

See the <a href="https://developer.mozilla.org/en/docs/Web/CSS/animation" rel="noreferrer">MDN documentation here</a>

blocks|key|3220583|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3220584|+-webkit-动画-填充模式:转发；/*+Safari4.0-+8.0+*/动画-填充模式:转发；|blockquote|3220585|3220586|3220587|浏览器支持|offset|length|style|BOLD|3220588|3220589|Chrome+43.0+(4.0+-moz-)|unordered-list-item|3220590|Shafari+10.0|3220591|+|3220592|Mozilla+16.0+(+5.0+-moz-)|3220593|Shafari+4.0+-webkit-+|3220594|Opera+15.0+-webkit-+(12.112.0+-o-)|3220595|3220596|3220597|用法：-|3220598|.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;
++}
}|code-block|syntax|javascript|3220599|entityMap^0|0|0|0|0|0|5|0|0|0|1|1|1|1|1|0|0|0|4|0|0^^$0|@$1|2|3|-4|4|5|6|1A|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1B|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1C|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|1D|7|@]|8|@]|9|$]]|$1|F|3|G|4|5|6|1E|7|@$H|1F|I|1G|J|K]]|8|@]|9|$]]|$1|L|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]|$1|M|3|N|4|O|6|1I|7|@]|8|@]|9|$]]|$1|P|3|Q|4|O|6|1J|7|@]|8|@]|9|$]]|$1|R|3|S|4|O|6|1K|7|@]|8|@]|9|$]]|$1|T|3|U|4|O|6|1L|7|@]|8|@]|9|$]]|$1|V|3|W|4|O|6|1M|7|@]|8|@]|9|$]]|$1|X|3|Y|4|O|6|1N|7|@]|8|@]|9|$]]|$1|Z|3|-4|4|5|6|1O|7|@]|8|@]|9|$]]|$1|10|3|-4|4|5|6|1P|7|@]|8|@]|9|$]]|$1|11|3|12|4|5|6|1Q|7|@$H|1R|I|1S|J|K]]|8|@]|9|$]]|$1|13|3|14|4|15|6|1T|7|@]|8|@]|9|$16|17]]|$1|18|3|-4|4|5|6|1U|7|@]|8|@]|9|$]]]|19|$]]

<blockquote>
<pre><code>-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
</code></pre>
</blockquote>

Browser Support

<ul>
<li>Chrome 43.0 (4.0 -webkit-)</li>
<li>IE 10.0 </li>
<li>Mozilla 16.0 ( 5.0 -moz-)</li>
<li>Shafari 4.0 -webkit- </li>
<li>Opera 15.0 -webkit- (12.112.0 -o-)</li>
</ul>

Usage:-

<pre><code>.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;
 }
}
</code></pre>

blocks|key|287049|text|实际上没有人这样做，它的工作方式被animation-play-state设置为暂停。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|287050|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state^0|H|K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Nobody actualy brought it so, the way it was made to work is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" rel="nofollow noreferrer">animation-play-state</a> set to paused.

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen. 

However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played. 

<pre><code>@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); }
}
</code></pre>

Stopping a CSS3 Animation on last frame

我有一个4部分的CSS3动画点击播放-但动画的最后一部分是为了把它从屏幕上删除。然而，一旦它玩完了，它总是会回到它的原始状态。任何人知道如何停止它在它的最后一个css帧(100%)，或者如何摆脱整个div，一旦它已经播放。@keyframes colorchange {  0%   { transform: scale...

问在最后一帧停止CSS3动画
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在最后一帧停止CSS3动画EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在最后一帧停止CSS3动画
EN