Question

是否可以链接两个动画然后无限循环这个链？ {|--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; }    
}

在此测试：http://jsfiddle.net/kQA6D/

Answer 1

简而言之，不（有些可以解决）

您的行animation-count: infinte当前正在执行的是元素：animation: ani1 3s 0s infinite, ani2 3s 9s infinite;。因此，由于声明的第一个动画的迭代次数为infinite，因此永远不会达到第二个动画

最简单和最常规的方式是使用javascript和animationEnd这样做（我使用Craig Buckler的PrefixedEvent function但是没有必要）

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 - 需要添加其他前缀）

否则，对于纯CSS修复，您必须将它们组合为一个动画。对于你看起来像

@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 - 需要添加其他前缀）

Answer 2

不，你需要在一个动画中用你想要的具体步骤声明它，如下所示：

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（使用-webkit-前缀可在Chrome中查看）

或者，您可以使用内置间隙单独声明动画，以便两个动画不重叠，如下所示：

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（使用-webkit-前缀可在Chrome中查看）

链CSS动画与无限循环

2 个答案: