Wie eine Schleife animierten text Banner mit css-keyframes

Möchte ich Schleife diese Textanzeigen, banner mit css-keyframes.

ersten gezeigt text1
zweite Hinzugefügt text2 (text1 bleibt dort)
Dritte Taste (text1 und text2 bleibt auch dort)
dann verschwinden 3 von Ihnen
und wieder gezeigt, text1
zweite Hinzugefügt text2 (text1 bleibt dort)
Dritte Taste (text1 und text2 bleibt auch dort)

Wie kann ich die Wiederholung(Schleife) diese Aktion?

Wenn ich unendlich -webkit-animation, ich kann die Schleife nur aus einem element.

Kann jemand helfen bitte?
Hier ist mein code 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;}
}

Um die loop-Dinge, die Sie benötigen zwei Kopien der Inhalte zu ermöglichen, das Ende und den Anfang zu side-by-side. Wenn die Grenze zwischen beiden geht aus dem Bildschirm, setzen Sie die position auf den Startpunkt, und starten Sie erneut.
Ich habe nicht sehr gut erklären, was ich machen wollte, also habe ich ein bisschen bearbeitet. Muss ich haben, zwei Exemplare in diesem Fall?

InformationsquelleAutor ddpatty | 2014-06-11

4

Als ich sagte in Kommentar, Sie haben die Verwendung von verschiedenen keyframes für jede animation. Dann haben Sie die volle Kontrolle über die Verzögerung zwischen den Animationen, der Punkt ist, alle Laufzeiten gleich sind, so haben Sie einen perfekten Zyklus. Beachten Sie, dass die Verwendung der animation-delay machen jede animation haben Ihren eigenen Kreislauf (bei gleicher Dauer). Sie können versuchen, optimieren Sie es, um die Summe der delay-Zeit und-Dauer werden alle Animationen gleich, aber die Anpassung ist sehr schwer zu tun. Ich würde verschiedene keyframes (sowie Animationen) für jedes element. Hier ist der code (für webkit-only):
```
.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;}
}
```
Aktualisierte demo
- Ich danke Ihnen sehr! Das ist genau, was ich tun wollte.
- du bist herzlich willkommen. In der Tat habe ich nicht gedacht, zum hinzufügen einer Antwort, aber sieht aus wie Sie es wirklich brauchen.
InformationsquelleAutor King King
1

Ich bin mir ziemlich sicher, dass Sie nicht starten Sie die animation onclick mit CSS allein. Sie verwenden müssen, 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();

});
```
- Ich bin sicher, das problem kann behoben werden, mithilfe von CSS-Animationen. Allerdings Bedarf es verschiedene Animationen für jedes element. Es erfordert auch Zeit zum testen ... denn Radfahren ist es wirklich nicht etwas, das leicht vorstellen. Auch Ihr code keine Schleife. Ich bezweifle, dass der OP will Schleife (sehen aus wie ein banner), bis der Benutzer auf die Schaltfläche klickt, und einige pop-up springt...
- Ich würde sehr sehr interessieren, um zu sehen, eine CSS-Klick-Lösung für dieses.
- warum denkst du, dass die OP braucht einen click-handler, hier? Er will eine Schleife (wie eine Uhr, läuft zyklisch).
- hier ist die Reine CSS-demo (ist das ähnliche, was zu deinem code) jsfiddle.net/viphalongpro/Ng3Qf/3 Obwohl es ist hacky, schwer zu Steuern das Verhalten, ... aber es ist der Weg, um es reines CSS. Aber es ist nur ein Beispiel, das zeigt nicht die OP das problem.
- Ich bearbeitet meine post. Ich denke, dass ich nicht gut erklären, was ich tun wollte. Ohne Klick auf diesen button möchte ich zeigen, Erste Hello Zweiten add-Hi (Hallo Aufenthalte dort) Dritten button hinzufügen (Hallo und Hallo dort bleiben) Dann 3 von Ihnen verschwinden. Wiederholen Sie diese Aktionen. Das war es, was ich tun möchte.
InformationsquelleAutor Kevin Lynch

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Aktualisierte demo