animation - 如何在动画中调用“循环”？

Question

我有这个动画：

#button-1
{
   -webkit-animation: leaf-rotation-1 1s linear 1 alternate 1.5s;
}

#button-2
{
   -webkit-animation: leaf-rotation-2 1s linear 1 alternate 4s;
}

#button-3
{
   -webkit-animation: leaf-rotation-3 1s linear 1 alternate 5.5s;
}

你怎么看，它们是在 1.5、4 和 5.5s 执行的。那么，当最后一个（5.5）结束时，我该如何重新启动第一个？

Answer 1

我想到的解决方案将要求您编写 3 个不同的动画，它们的时间安排得当，并在循环中无休止地运行它们。

这是这个概念的一个活生生的例子

所以第一个动画以 33% 结束，第二个动画从 33 开始到 66 结束，最后运行 66-100。这无限运行。

CSS：

@-webkit-keyframes width-1 {
    0% {
        width: 100px;
    }
    17% {
        width: 500px;
    }
    33% {
        width: 100px;
    }
}
@-webkit-keyframes width-2 {
    33% {
        width: 100px;
    }
    50% {
        width: 500px;
    }
    66% {
        width: 100px;
    }
}
@-webkit-keyframes width-3 {
    66% {
        width: 100px;
    }
    83% {
        width: 500px;
    }
    100% {
        width: 100px;
    }
}
div {
    background: red;
    width: 100px;
}

#div1 {
    -webkit-animation: width-1 1s infinite linear;
}

#div2 {
    -webkit-animation: width-2 1s infinite linear;
}

#div3 {
    -webkit-animation: width-3 1s infinite linear;
}

HTML

<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>