Làm thế nào để giữ kiểu sau khi hoạt ảnh?

Question

Tôi đang làm việc tại một danh mục đầu tư để hiển thị khi tôi đăng ký cho nghiên cứu tiếp theo của mình. Vì chúng ta đang sống trong năm 2012, nó có rất nhiều hình ảnh động ưa thích và rác CSS3, chỉ để mang đến cho họ cảm giác 'Chúng ta cần anh chàng này'. Tôi đang gặp vấn đề nhỏ vào lúc này.

Đây là một phần nhỏ của một yếu tố cụ thể:

/* This is the CSS of the elements with the id called 'fadein' */ 
#fadein { 
    -moz-animation-duration: 2s; 
    -moz-animation-name: item; 
    -moz-animation-delay: 4.5s; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: item; 
-webkit-animation-delay: 4.5s; 
opacity:0; 
-webkit-opacity:0; 
} 

@-webkit-keyframes item { 
from { 
-webkit-opacity: 0; 
    } 
to { 
-webkit-opacity: 1; 
} 
} 

Xin lưu ý rằng tôi rời ra keyframes Firefox, vì chúng là hoàn toàn giống nhau. CSS đúng, có định dạng xấu khiến các thành phần có id 'fadein' ... mờ dần.

Vấn đề là, các phần tử biến mất sau khi hoạt ảnh kết thúc. Điều này biến Css bị định dạng xấu thành Css không sử dụng được.

Có ai có ý tưởng nào về cách giữ kiểu thay đổi sau hoạt ảnh không?

Tôi đoán câu hỏi này đã được hỏi trước và tôi rất tiếc vì điều đó nếu có.

Answer 1

Hãy thử với:

#fadein { 
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ 
    -moz-animation-fill-mode: forwards; /* FF 5+ */ 
    -o-animation-fill-mode: forwards;  /* Not implemented yet */ 
    -ms-animation-fill-mode: forwards;  /* IE 10+ */ 
    animation-fill-mode: forwards;   /* When the spec is finished */ 
} 

Answer 2

Duopixels câu trả lời là đúng cách, nhưng không hoàn toàn qua trình duyệt, tuy nhiên, plugin jquery này cho phép callbacks hoạt hình và bạn có thể tạo kiểu các yếu tố làm thế nào bạn thích trong hàm callback: https://github.com/krazyjakee/jQuery-Keyframes