Hoạt ảnh CSS chuỗi có vòng lặp vô hạn

Question

Có thể ghép chuỗi hai hoạt ảnh và sau đó lặp chuỗi này vô hạn định không? {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop

div { 
    width: 50px; height: 50px; border: 3px solid black; 
    animation: ani1 3s 0s 3, ani2 3s 9s 2; 
    /*animation-iteration-count: infinite;*/ 
} 
@keyframes ani1 { 
    from { background: green; } 
    50% { background: red; } 
    to { background: green; }  
} 
@keyframes ani2 { 
    from { width: 100px; } 
    50% { width: 150px; } 
    to { width: 100px; }  
} 

thử nghiệm ở đây: http://jsfiddle.net/kQA6D/

Answer 1

Nói tóm lại, không (một số công việc xung quanh là có thể)

Dòng của bạn animation-count: infinte hiện đang làm là điều này cho phần tử: animation: ani1 3s 0s infinite, ani2 3s 9s infinite;. Vì vậy, kể từ khi hoạt hình đầu tiên tuyên bố có một số lần lặp của infinite, thứ hai sẽ không bao giờ đạt được

Cách đơn giản nhất và thông thường nhất là nên sử dụng javascript và animationEnd để làm như vậy (tôi sử dụng Craig Buckler của PrefixedEvent function nhưng nó không cần thiết)

var elem = document.querySelectorAll("div")[0], 
    pfx = ["webkit", "moz", "MS", "o", ""];  
function PrefixedEvent(element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.addEventListener(pfx[p]+type, callback, false); 
    } 
}  
PrefixedEvent(elem, "animationend", function() { switchAnims(elem) });  
function switchAnims(element) { 
    if(element.style.animationName = "ani1") { 
     element.style.animationName = "ani2"; 
    } else { 
     element.style.animationName = "ani1"; 
    } 
} 

(webkit chỉ - tiền tố khác cần phải được bổ sung)

Nếu không cho một sửa chữa CSS tinh khiết vào lúc này bạn sẽ phải kết hợp chúng như một hình ảnh động. Đối với bạn rằng sẽ trông như thế

@keyframes aniBoth { 
    0%, 16.666%, 33.333%  { background: green; } 
    8.333%, 24.999%, 41.666% { background: red; } 
    50%      { background: green; } 
    50.001%     { background:white; width: 100px; } 
    75%, 100%    { width: 100px; } 
    62.5%, 87.5%    { width: 150px; } 
} 

(webkit chỉ - tiền tố khác cần phải được bổ sung)

Answer 2

Không, bạn sẽ cần phải khai báo nó tất cả trong một hình ảnh động với các bước cụ thể mà bạn muốn, như vậy:

div { 
    width: 50px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 3s 0s infinite; 
} 
@keyframes ani1 { 
    0 { background: green; } 
    10% { background: red; } 
    20% { background: green; } 
    30% { background: red; } 
    40% { background: green; } 
    50% { background: red; } 
    60% { background: green; width: 50px; } 
    70% { width: 100px; } 
    80% { width: 150px; } 
    90% { width: 100px; } 
    100% { width: 150px; } 
} 

Demo (Sử dụng -webkit- có thể xem tiền tố trong Chrome)

Ngoài ra, bạn có thể khai báo y hình ảnh động của chúng tôi riêng với một xây dựng trong khoảng cách để hai hình ảnh động không chồng chéo, như vậy:

div { 
    width: 100px; 
    height: 50px; 
    border: 3px solid black; 
    animation: ani1 12s 0s infinite, ani2 12s 0s infinite; 
} 
@keyframes ani1 { 
    0%, 60%, 100% { background: white; } 
    20%, 40% { background: green; } 
    10%, 30%, 50% { background: red; } 
} 

@keyframes ani2 { 
    60%, 80%, 100% { width: 100px; } 
    70%, 90% { width: 150px; } 
} 

Demo (Sử dụng -webkit- tiền tố xem được ở chế Chrome)