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

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

首先显示文本1

第二个添加的text2（text1保持不变）

第三个添加的按钮（text1和text2也保持不变）

然后消失其中3个

再次显示文本1

第二个添加的text2（text1保持不变）

第三个添加的按钮（text1和text2也保持不变）

我如何重复（循环）这些动作

如果我有无限的in-webkit动画，我只能循环一个元素

有人能帮忙吗？ 这是我的密码

---

我很确定你不能仅仅使用CSS来重新启动动画

onclick

。您将需要使用jquery/javascript

演示

---

我很确定你不能仅仅使用CSS来重新启动动画

onclick

。您将需要使用jquery/javascript

演示

---

正如我在评论中所说，您必须为每个动画使用不同的关键帧。然后你可以完全控制动画之间的延迟，关键是所有的持续时间都是一样的，所以你有一个完美的循环。请注意，使用

动画延迟

将使每个动画都有自己的周期（具有相同的持续时间）。您可以尝试调整它，使所有动画的总延迟时间和持续时间相等，但调整非常困难。我会为每个元素创建不同的关键帧（以及动画）。以下是代码（仅适用于webkit）：

---

正如我在评论中所说，您必须为每个动画使用不同的关键帧。然后你可以完全控制动画之间的延迟，关键是所有的持续时间都是一样的，所以你有一个完美的循环。请注意，使用

动画延迟

将使每个动画都有自己的周期（具有相同的持续时间）。您可以尝试调整它，使所有动画的总延迟时间和持续时间相等，但调整非常困难。我会为每个元素创建不同的关键帧（以及动画）。以下是代码（仅适用于webkit）：

---

为了循环内容，您需要两份内容副本，以允许结束和开始并排。当两者之间的边界离开屏幕时，将位置重置为起始点，然后重新开始。我没有很好地解释我想要做什么，所以我编辑了一点。在这种情况下，我必须有两个副本吗？为了循环内容，你需要两个副本的内容，以允许结束和开始并排。当两者之间的边界离开屏幕时，将位置重置为起始点，然后重新开始。我没有很好地解释我想要做什么，所以我编辑了一点。在这种情况下，我必须要有两个副本吗？我相信这个问题可以通过CSS动画解决。但是，每个元素需要不同的动画。它还需要时间测试。。。因为骑自行车真的很难想象。此外，您的代码不会循环它。我怀疑OP是否想循环它（看起来像一个横幅），直到用户点击按钮，一些弹出窗口跳出…我非常有兴趣看到CSS纯点击解决方案。为什么你认为OP需要点击处理程序？他想循环它（就像时钟一样，循环运行）。这是纯CSS演示（与您的代码做类似的事情），尽管它很粗糙，很难控制行为。。。但这是使其成为纯CSS的方法。然而，这只是一个例子，并没有显示OP的问题。我编辑了我的帖子。我想我没有很好地解释我想做什么。不点击这个按钮，我想显示，第一个Hello第二个add Hi（Hello停留在那里）第三个add按钮（Hello和Hi停留在那里），然后，其中3个消失了。重复这些动作。这就是我想做的。我相信这个问题可以用CSS动画解决。但是，每个元素需要不同的动画。它还需要时间测试。。。因为骑自行车真的很难想象。此外，您的代码不会循环它。我怀疑OP是否想循环它（看起来像一个横幅），直到用户点击按钮，一些弹出窗口跳出…我非常有兴趣看到CSS纯点击解决方案。为什么你认为OP需要点击处理程序？他想循环它（就像时钟一样，循环运行）。这是纯CSS演示（与您的代码做类似的事情），尽管它很粗糙，很难控制行为。。。但这是使其成为纯CSS的方法。然而，这只是一个例子，并没有显示OP的问题。我编辑了我的帖子。我想我没有很好地解释我想做什么。不点击这个按钮，我想显示，第一个Hello第二个add Hi（Hello停留在那里）第三个add按钮（Hello和Hi停留在那里），然后，其中3个消失了。重复这些动作。这就是我想做的。非常感谢！这正是我想做的。@ddpatty不客气。事实上，我并不打算添加一个答案，但看起来你真的需要它。非常感谢！这正是我想做的。@ddpatty不客气。事实上，我并不打算添加一个答案，但看起来你真的需要它。

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

$("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();

});

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