CSS Animation 属性在动画后保持不变

CSS Animation property stays after animating

提问by SparrwHawk

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

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

This is what I'm trying to achieve...

这就是我正在努力实现的......

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.

当用户登陆页面时，该元素应该隐藏，在 3 秒（或其他）之后，它应该淡入，一旦动画完成它应该留在那里。

Here is a fiddle attempt... http://jsfiddle.net/GZx6F/

这是一个小提琴尝试...... http://jsfiddle.net/GZx6F/

Here is the code for preservation...

这是保存的代码...

<h2>Test</h2>

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

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

I know how to do this with jQuery.. it would be like this...

我知道如何用 jQuery 做到这一点......它会是这样......

<h2>test</h2>

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

回答by Fabrizio Calderan

I think you're looking for animation-fill-modeCSS3 property

我认为您正在寻找animation-fill-modeCSS3 属性

https://developer.mozilla.org/en/CSS/animation-fill-mode

https://developer.mozilla.org/en/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

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

for your purpose just try to set

为了您的目的，请尝试设置

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

Setting forwardsvalue ?the target will retain the computed values set by the last keyframe encountered during execution?

设置转发值？目标将保留执行期间遇到的最后一个关键帧设置的计算值？

回答by yckart

In addition to the answerof @Fabrizio Calderan, it has to be said that you can even apply the animation-fill-modeproperty forwardsdirectly to animation. So the following should also work:

除了@Fabrizio Calderan的回答之外，不得不说，您甚至可以将该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>

回答by tyau

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

类似的事情发生在我身上。我添加了 position:relative 动画元素并为我修复了它。

回答by codeWithMe

How to animate an element and get it to stay as the animation is done:

如何为元素设置动画并使其在动画完成时保持不变：

// 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>