CSS 动画属性在动画后保留

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

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

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

这是一个小提琴尝试......http://jsfiddle.net/GZx6F/ 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>

我想你正在寻找animation-fill-modeCSS3 属性

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

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

为了你的目的，只需尝试设置

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

Setting forwardsvalue «目标将保留执行过程中遇到的最后一个关键帧设置的计算值»