动画后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>

Answer 1

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

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

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

Answer 2

除了答案的@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>