Dừng một hình ảnh động CSS3 trên khung hình cuối cùng

Tôi có một hoạt hình CSS3 gồm 4 phần đang phát khi nhấp - nhưng phần cuối của hoạt hình có nghĩa là phải tắt nó khỏi màn hình.

Tuy nhiên, nó luôn quay trở lại trạng thái ban đầu khi nó đã chơi. Bất cứ ai cũng biết làm thế nào tôi có thể dừng nó trên khung css cuối cùng của nó (100%) , hoặc cách khác để loại bỏ toàn bộ div nó có trong khi nó đã chơi.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Bạn đang tìm:

animation-fill-mode: forwards;

Thông tin thêm về MDN và danh sách hỗ trợ trình duyệt trên canIuse .

Nếu bạn muốn thêm hành vi này vào animationđịnh nghĩa thuộc tính tốc ký , thứ tự của các thuộc tính phụ như sau

animation-name- mặc định none

animation-duration- mặc định 0s

animation-timing-function- mặc định ease

animation-delay- mặc định 0s

animation-iteration-count- mặc định 1

animation-direction- mặc định normal

animation-fill-mode- bạn cần đặt cái này thành forwards

animation-play-state- mặc định running

Do đó, trong trường hợp phổ biến nhất, kết quả sẽ giống như thế này

animation: colorchange 1s ease 0s 1 normal forwards;

Xem tài liệu MDN tại đây

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Hỗ trợ trình duyệt

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

Sử dụng:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Cách tốt nhất dường như đặt trạng thái cuối cùng ở phần chính của css. Giống như ở đây, tôi đặt chiều rộng 220px, để cuối cùng nó trở thành 220px. Nhưng bắt đầu0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Không phải vấn đề của bạn là bạn đang đặt lại webkitAnimationName thành không có gì để điều đó đặt lại CSS cho đối tượng của bạn về trạng thái mặc định. Sẽ không ở lại nơi nó kết thúc nếu bạn chỉ xóa chức năng setTimeout đang đặt lại trạng thái?

Tôi vừa đăng một câu trả lời tương tự, và có lẽ bạn muốn xem qua:

http://www.w3.org/TR/css3-animations/#animation-events-

Bạn có thể tìm hiểu các khía cạnh của một hình ảnh động, chẳng hạn như bắt đầu và dừng lại, và sau đó, một khi nói rằng sự kiện 'dừng lại' đã nổ ra, bạn có thể làm bất cứ điều gì bạn muốn với dom. Tôi đã thử cách này một thời gian trước và nó có thể hoạt động, nhưng tôi đoán bạn sẽ bị hạn chế sử dụng webkit trong thời gian này (nhưng có lẽ bạn đã chấp nhận điều đó rồi). Btw, vì tôi đã đăng cùng một liên kết cho 2 câu trả lời, tôi sẽ đưa ra lời khuyên chung này: hãy xem W3C - họ viết khá nhiều quy tắc và mô tả các tiêu chuẩn. Ngoài ra, các trang phát triển webkit là chìa khóa khá.

Không ai thực sự mang nó như vậy, cách nó được tạo ra để hoạt động là trạng thái hoạt hình-play- set được tạm dừng.

Tôi đã học được rằng có một giới hạn bạn muốn sử dụng cho chế độ điền. Đây là từ một nhà phát triển của Apple. Tin đồn là * khoảng * sáu, nhưng không chắc chắn. Ngoài ra, bạn có thể đặt trạng thái ban đầu của lớp thành cách bạn muốn hoạt hình kết thúc, sau đó * khởi tạo * nó ở mức / 0%.