blocks|key|619240|text|除了@Fabrizio+Calderan的answer之外，不得不说您甚至可以将animation-fill-mode属性forwards直接应用于animation。因此，下面的代码也应该有效：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|619241|​|619242|@keyframes+fadeIn+{
++0%25+{
++++opacity:+0;
++}
++100%25+{
++++opacity:+0.9;
++}
}

h2+{
++opacity:+0;
++animation:+fadeIn+1s+ease-in-out+3s+forwards;
}|code-block|syntax|javascript|619243|<script+src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>|619244|619245|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1098851/fabrizio-calderan|1|https://stackoverflow.com/a/9774884/1250044^0|14|J|1P|8|22|9|2|I|0|L|6|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]]]

<p>In addition to the <a href="https://stackoverflow.com/a/9774884/1250044">answer</a> of <a href="https://stackoverflow.com/users/1098851/fabrizio-calderan">@Fabrizio Calderan</a>, it has to be said that you can even apply the <code>animation-fill-mode</code> property <code>forwards</code> directly to <code>animation</code>. So the following should also work:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"&gt;&lt;/script&gt;
&lt;h2&gt;Test&lt;/h2&gt;</code></pre>
</div>
</div>
</p>


blocks|key|403592|text|我也遇到过类似的事情。我添加了position:相对于动画元素，这为我修复了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403593|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|$]]

<p>I had something similar happening to me. I added position:relative to the element that was animating and that fixed it for me.</p>


blocks|key|403620|text|如何为元素设置动画并使其在动画完成时保持不动：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403621|​|403622|//+Beggin|code-block|syntax|javascript|403623|#box+{
++/*+Give+it+a+width,+a+height+and+a+background+so+can+see+it++*/
++width:+200px;
++height:+200px;
++/*+Unimportant+styling+*/
++box-shadow:+0+0+10px+0+rgba(0,+0,+0,+.4)+inset;
++border-radius:+7px;
++background:+linear-gradient(to+bottom,+#fff+30%25,+#fcfcfc+40%25,+#f8f8f8+50%25,+#f0f0f0+100%25);
++
++/*+Starts+here:+*/
++opacity:+0;
++animation:+yourName+2800ms+ease-in-out+0s+forwards;
}

@keyframes+yourName+{
++0%25+/*+(from)+*/+{
++++opacity:+0;
++}
++100%25+/*+(to)+*/+{
++++opacity:+1;
++}
}|403624|<div+id="box"></div>|403625|403626|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>How to animate an element and get it to stay as the animation is done:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Beggin</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|403632|text|//+Beggin|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|403633|#box+{
++/*+Give+it+a+width,+a+height+and+a+background+so+can+see+it++*/
++width:+200px;
++height:+200px;
++/*+Unimportant+styling+*/
++box-shadow:+0+0+10px+0+rgba(0,+0,+0,+.4)+inset;
++border-radius:+7px;
++background:+linear-gradient(to+bottom,+#fff+30%25,+#fcfcfc+40%25,+#f8f8f8+50%25,+#f0f0f0+100%25);
++
++/*+Starts+here:+*/
++opacity:+0;
++animation:+yourName+2800ms+ease-in-out+0s+forwards;
}

@keyframes+yourName+{
++0%25+/*+(from)+*/+{
++++opacity:+0;
++}
++100%25+/*+(to)+*/+{
++++opacity:+1;
++}
}|403634|<div+id="box"></div>|403635|unstyled|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$B|C]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|H|3|-4|5|I|7|N|8|@]|9|@]|A|$]]]|J|$]]


<pre class="lang-js prettyprint-override"><code>// Beggin
</code></pre>
<pre class="lang-css prettyprint-override"><code>#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;box&quot;&gt;&lt;/div&gt;
</code></pre>


<p>I'm trying to get a CSS animation property to stay after completing, is this possible?</p>

<p>This is what I'm trying to achieve...</p>

<p>The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.</p>

<p>Here is a fiddle attempt...
<a href="http://jsfiddle.net/GZx6F/" rel="noreferrer">http://jsfiddle.net/GZx6F/</a></p>

<p>Here is the code for preservation...</p>

<pre><code>&lt;h2&gt;Test&lt;/h2&gt;

&lt;style&gt;
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
&lt;/style&gt;
</code></pre>

<p>I know how to do this with jQuery.. it would be like this...</p>

<pre><code>&lt;h2&gt;test&lt;/h2&gt;

&lt;script&gt;
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
&lt;/script&gt;
</code></pre>


CSS Animation property stays after animating

jQuery

我正在尝试让一个CSS动画属性在完成后保留下来，这可能吗？这就是我想要实现的.当用户登陆页面时，元素应该是隐藏的，在3秒后(或其他)，它应该淡入，并且一旦动画完成，它应该留在那里。这是一个小提琴尝试..。这是保存的代码。<h2>Test</h2><style>@keyframes fadeIn {    0% {   ...

问CSS动画属性在动画后保留
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画属性在动画后保留EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画属性在动画后保留
EN