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

Tôi đang chạy một hình ảnh động trên một số thành phần được đặt opacity: 0;trong CSS. Lớp hoạt hì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ừ 0sang 1(trong số những thứ khác).

Thật không may, khi hoạt ảnh kết thúc, các yếu tố quay trở 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ể có được yếu tố để làm như vậy?

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

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

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

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

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

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

Điều này mang lại:

• 2s thời lượng
• linear chức năng thời gian
• 0.5s sự chậm trễ
• 1 số lần lặp (có thể là vô hạn)
• normal phương hướng
• forwards chế độ điền (đặt ngược nếu bạn muốn có khả năng tương thích để sử dụng vị trí kết thúc làm trạng thái cuối cùng)

NẾU KHÔNG SỬ DỤNG NGẮN TAY VERSION: Hãy chắc chắn rằng animation-fill-mode: forwardslà SAU việc kê khai hoạt hình hoặc nó sẽ không làm việc ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

đấu với

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Sử dụng chế độ hình ảnh động-điền: chuyển tiếp;

animation-fill-mode: forwards;

Phần tử sẽ giữ lại các giá trị kiểu được đặt bởi khung hình chính cuối cùng (phụ thuộc vào hướng hoạt hình và số lần lặp hoạt hình).

Lưu ý: Quy tắc @keyframes không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó.

Ví dụ làm việc

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>