无限循环的链式CSS动画

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

tested here: http://jsfiddle.net/kQA6D/

- Qwerty

Answer 1

简而言之，不行（一些变通方法是可能的）

对于该元素，您的代码行animation-count: infinte当前正在执行此操作：animation: ani1 3s 0s infinite, ani2 3s 9s infinite;。因此，由于第一个声明的动画具有无限迭代次数，第二个将永远不会被触发。

最简单和常规的方法是使用JavaScript和animationEnd来实现（我使用Craig Buckler的PrefixedEvent函数，但这不是必需的）。

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

- Zach Saucier

---

纯CSS修复的语法乍一看很令人困惑，但比我的解决方案更优雅、简洁。赞！ - shshaw

我本来想让它纯CSS实现，但问题是：1）我必须重新计算百分比；2）时序函数。 我猜只剩下JavaScript了。 - Qwerty

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

演示（使用 -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; } 
}

演示（使用-webkit-前缀可在Chrome中查看）

- shshaw

---

@ZachSaucier 在动画中填补空白。在你的例子中，你把所有东西都放在一个动画里，第二个动画从50%开始。我的方法只是从60%开始第二个动画，第一个动画在60%完成，保持它们作为单独的关键帧，但防止它们重叠。 - shshaw

@ZachSaucier 这里有一个使用类似于你的简短语法的简化示例：http://jsfiddle.net/shshaw/FLTbk/ - shshaw

啊，我明白了！我错过那个太傻了。 - Zach Saucier

在一个动画中（或者带间隔）执行它的问题在于：1）我需要重新计算百分比，2）时序函数。 - Qwerty

@Qwerty 是的，不幸的是我认为JavaScript是唯一的选择！Zach的解决方案应该是你需要的 :-) - shshaw