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

这就是我想要实现的目标…

当用户登陆页面时，该元素应该被隐藏，在3秒钟（或任何其他时间）之后，该元素应淡入，动画完成后应留在该页面上。

这是一个小提琴尝试…

这是保存代码…

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