Duy trì trạng thái cuối cùng ở cuối hoạt ảnh CSS3

Question

Tôi đang chạy một hoạt ảnh trên một số thành phần được đặt thành opacity: 0; trong CSS. Lớp hoạt ảnh được áp dụng trên Click và, bằng cách sử dụng khung hình chính, nó thay đổi độ mờ từ 0 thành 1 (trong số những thứ khác).

Thật không may, khi hoạt ảnh kết thúc, các phần tử quay lại opacity: 0 (trong cả Firefox và Chrome). Suy nghĩ tự nhiên của tôi sẽ là các yếu tố hoạt hình duy trì trạng thái cuối cùng, ghi đè các thuộc tính ban đầu của chúng. Điều này có đúng không? Và nếu không, làm thế nào tôi có thể nhận được các yếu tố để làm như vậy?

Mã (tiền tố phiên bản không bao gồm):

@keyframes bubble { 
    0% { transform:scale(0.5); opacity:0.0; } 
    50% { transform:scale(1.2); opacity:0.5; } 
    100% { transform:scale(1.0); opacity:1.0; } 
} 

Answer 1

Hãy thử thêm animation-fill-mode: forwards;. Ví dụ như thế này:

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */ 

Answer 2

Nếu bạn đang sử dụng hình ảnh động nhiều thuộc tính viết tắt là:

animation: bubble 2s linear 0.5s 1 normal forwards; 

cho thời gian 2s, tuyến tính thời gian chức năng, 0.5s delay, 1 lặp đếm, hướng bình thường , chuyển tiếp chế độ điền