CSS动画属性在动画完成后仍然保留

Question

我想让一个CSS动画属性在完成后保留，这可能吗？

我想要实现的效果是...

当用户进入页面时，元素应该是隐藏状态，3秒后（或其他时间），它应该淡入并且一旦动画完成就应该保留在那里。

下面是一个尝试的示例... http://jsfiddle.net/GZx6F/

以下是代码：

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

我知道如何使用jQuery实现这个.. 大致代码如下...

<h2>test</h2>

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

- SparrwHawk

---

w3schools 过时了吗？它说 Chrome 和 FireFox 只支持替代方案。 - iambriansreed

我总是假设它是的 :) - BoltClock

@iambriansreed，甚至不要点击w3schools的搜索结果。如果你不小心点开了，请将目光从显示器上移开并按下鼠标上的后退键。 - doug65536

Answer 1

我认为你正在寻找CSS3属性animation-fill-mode。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode 引用：

animation-fill-mode CSS属性指定CSS动画在执行之前和之后如何向其目标应用样式。

针对你的目的，只需尝试设置：

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

设置 forwards 值为“目标将保留在执行期间遇到的最后一帧关键帧设置的计算值”

- Fabrizio Calderan

---

谢谢Fabrizio，太好了，我会接受这个答案。只有一件奇怪的事情正在发生，我想知道你是否知道 - 在iOS上（没有测试其他任何东西），缓慢进入的倒计时在我滚动时暂停，例如，如果我在页面加载时立即开始滚动，则不会淡入。但是当我停止滚动时，3秒钟开始倒计时。这只是默认的iOS行为吗？谢谢。 - SparrwHawk

多么棒的解决方案。 - Lalnuntluanga Chhakchhuak

这在原始SVG动画中可用吗？ - Justin

动画填充模式：完美运行，谢谢。 - yanguya995

Answer 2

除了@Fabrizio Calderan的answer之外，还需要说一下，您甚至可以直接将animation-fill-mode属性forwards应用于animation。因此，以下内容也应该有效：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

- yckart

Answer 3

如何使元素动画并在动画完成后保持其状态：

// Beggin

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

<div id="box"></div>

- codeWithMe

Answer 4

如果我理解你的问题正确，你希望动画保持在最终状态。我会使用fill mode。

animation-fill-mode: forwards;

- Ben Offonime

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 5

我曾经遇到过类似的问题。我在正在执行动画的元素上添加了position:relative，这样问题就解决了。

- tyau