Hình động css3 nhấp nháy cứng (không phai giữa các khung hình)

Question

cố gắng nhấp nháy ba phần tử liên tiếp với hoạt ảnh css3. Tôi đã có nó chạy, nhưng có một phai cho mỗi khung và tôi muốn loại bỏ nó. lý tưởng mỗi phần tử vẫn hiển thị trong 1 giây, sau đó ẩn ngay lập tức.

tôi đã cố gắng thiết lập các hình ảnh động với khung tại 0% và 99% cho opacity:1 và 100% cho opacity: 0 nhưng vẫn không có may mắn.

tôi hy vọng có cách để loại bỏ mờ dần!

webkit js fiddle

CSS:

.motion.play .frame { 
    -webkit-animation-name: flash; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: linear; 
} 
    .frame:nth-of-type(2) { 
     -webkit-animation-delay: 1s; 
    } 
    .frame:nth-of-type(3) { 
     -webkit-animation-delay: 2s; 
    } 

    @-webkit-keyframes flash { 
     0% { 
      opacity: 1; 
     } 
     100% { 
      opacity: 0; 
     } 
    } 

Answer 1

Sử dụng thích hợp animation-timing-function:

http://jsfiddle.net/rfGDD/1/ (chỉ WebKit)

.motion.play .frame { 
    -webkit-animation-name: flash; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; /* not "linear" */ 
    -webkit-animation-fill-mode:forwards; 
    -webkit-animation-timing-function:steps(3, end); 
} 

MDN document on fill-mode

MDN document on direction

MDN document on steps() timing function

Sửa:

Rất tiếc, chỉ nhận ra các lỗ hổng logic.

Revised: http://jsfiddle.net/rfGDD/3/ (WebKit chỉ)

Ngoài những thay đổi trên, thay đổi flash hình ảnh động để sau:

@-webkit-keyframes flash { 
    0% { 
     opacity: 1; 
    } 
    33% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

Vấn đề là, các hình ảnh động đóng 3 giây, nhưng mỗi nhu yếu tố ở trạng thái opacity:0 sau giây thứ hai, vì vậy tôi cần phải chia hoạt ảnh thành 2 giai đoạn (với tỷ lệ thời gian là 1: 2), vì vậy các phần tử có thể trông giống như chúng ở trong giai đoạn cuối trong 2 giây.

Answer 2

Chỉ cần xác định hoạt ảnh của bạn để nó giữ một trạng thái càng lâu càng tốt và sau đó chuyển sang trạng thái khác càng nhanh càng tốt. Như thế này:

@-webkit-keyframes flash { 
     0% { opacity: 1; } 
    49% { opacity: 1; } 
    50% { opacity: 0; } 
    100% { opacity: 0; } 
} 

Answer 3

Bạn có thể giữ độ mờ trong thời gian dài nhất và thay đổi nhanh chóng.

Hãy thử điều này:

.div 
    animation: blink 1s linear infinite 

@keyframes blink 
    0%,50% 
    opacity: 0 
    51%,100% 
    opacity: 1