Question

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

首先显示text1
第二个添加了text2（text1停留在那里）
第三个添加按钮（text1和text2也保留在那里）
然后消失了3个
并再次显示text1
第二个添加了text2（text1停留在那里）
第三个添加按钮（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;}
}

Updated demo

Answer 2

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

DEMO 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();

});

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

2 个答案:

Updated demo