Thuộc tính CSS Animation vẫn tồn tại sau khi tạo hoạt ảnh

Tôi đang cố gắng duy trì thuộc tính hoạt ảnh CSS sau khi hoàn thành, điều này có khả thi không?

Đây là những gì tôi đang cố gắng đạt được ...

Phần tử phải được ẩn khi người dùng truy cập vào trang, sau 3 giây (hoặc bất cứ điều gì), phần tử sẽ mờ dần và sau khi hoạt ảnh hoàn thành, phần tử sẽ ở đó.

Đây là một nỗ lực fiddle ... http://jsfiddle.net/GZx6F/

Đây là mã bảo quản ...

<h2>Test</h2>

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

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

Tôi biết cách làm điều này với jQuery .. nó sẽ như thế này ...

<h2>test</h2>

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

Tôi nghĩ bạn đang tìm thuộc animation-fill-modetính CSS3

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

Thuộc tính CSS animation-fill-mode chỉ định cách một hoạt ảnh CSS sẽ áp dụng các kiểu cho mục tiêu của nó trước và sau khi nó đang thực thi.

cho mục đích của bạn chỉ cần cố gắng thiết lập

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

Đặt giá trị chuyển tiếp «mục tiêu sẽ giữ lại các giá trị tính toán được đặt bởi khung hình chính cuối cùng gặp phải trong quá trình thực thi»

Ngoài câu trả lời của @Fabrizio Calderan , cần phải nói rằng bạn thậm chí có thể áp dụng thuộc animation-fill-modetính forwardstrực tiếp cho animation. Vì vậy, những điều sau đây cũng sẽ hoạt động:

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

Tôi đã có một cái gì đó tương tự xảy ra với tôi. Tôi đã thêm vị trí: liên quan đến phần tử đang tạo hoạt ảnh và điều đó đã sửa nó cho tôi.

Cách tạo hoạt ảnh cho một phần tử và giữ nguyên khi hoạt ảnh hoàn thành:

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