css - 如何使用 css 关键帧循环动画文本横幅

Question

我想使用 css 关键帧循环这个文字广告横幅。

1. 首先显示的文本1
2. 第二个添加 text2 （text1 留在那里）
3. 第三个添加的按钮（text1 和 text2 也保留在那里）
4. 然后消失其中 3 个
5. 并再次显示 text1
6. 第二个添加 text2 （text1 留在那里）
7. 第三个添加的按钮（text1 和 text2 也保留在那里）

我怎样才能重复（循环）这些动作？

如果我在 -webkit-animation 中有无限，我只能循环一个元素。

有人可以帮忙吗？这是我的代码http://jsfiddle.net/ddpatty/Ng3Qf/

.lg-text-1 {
    -webkit-animation: txt-animation 0.8s 1 ease-in-out;
}
.lg-text-2 {
    -webkit-animation: txt-animation 1.5s 0.8s 1 ease-in-out;
}
.button {
    -webkit-animation: btn-animation 2s 0.3s 1 ease-in-out;
}
@-webkit-keyframes txt-animation {
0%   {opacity: 0;}
80%  {opacity: 0.8;}
100% {opacity: 1;}
}

@-webkit-keyframes btn-animation {
0%   {opacity: 0;}
80%  {opacity: 0;}
100% {opacity: 1;}
}

Answer 1

正如我在评论中所说，您必须为每个动画使用不同的关键帧。然后你可以完全控制动画之间的延迟，关键是所有的持续时间都是一样的，所以你有一个完美的循环。请注意，使用animation-delay将使每个动画都有自己的周期（具有相同的持续时间）。您可以尝试调整它以使所有动画的总延迟时间和持续时间相等，但调整非常困难。我会为每个元素创建不同的关键帧（以及动画）。这是代码（仅适用于 webkit）：

.lg-text-1 {
    -webkit-animation: txt-animation1 3s infinite ease-in-out;  
}

.lg-text-2 {
    -webkit-animation: txt-animation2 3s infinite ease-in-out;
}

.button {
    /*....*/
    -webkit-animation: btn-animation 3s infinite ease-in-out;
}

@-webkit-keyframes txt-animation1 {
    0%, 20% {opacity: 0;}
    60%  {opacity: 0.8;}
    100% {opacity: 1;}
}

@-webkit-keyframes txt-animation2 {
    0%, 40% {opacity: 0;}
    60%  {opacity: 0.8;}
    100% {opacity: 1;}
}


@-webkit-keyframes btn-animation {
    0%, 60%   {opacity: 0;} 
    80%, 100% {opacity: 1;}
}

更新的演示

Answer 2

我很确定您不能onclick单独使用 CSS 重新启动动画。您将需要使用 jquery/javascript。

演示http://jsfiddle.net/Ng3Qf/1/

$("a").click(function () {

    var el = $('#one'),
        newone = el.clone(true);

    el.before(newone);

    $("." + el.attr("class") + ":last").remove();

    var el2 = $('#two'),
        newone2 = el2.clone(true);

    el2.before(newone2);

    $("." + el2.attr("class") + ":last").remove();

});