How to loop animated text banners using css keyframes - css

Question

I want to loop this text ads banner using css keyframes.
first shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
then disappear 3 of them
and again shown text1
second added text2 (text1 stays there)
third added button (text1 and text2 also stays there)
How can I repeat(loop) these action?
If I have infinite in -webkit-animation, I can loop only one element.
Can anyone help please?
Here is my 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;}
}

Answer 1

As I said in the comment, you have to use different keyframes for each animation. Then you have full control over the delay between animation, the point is all the durations are the same, so you have a perfect cycle. Note that using the animation-delay will make each animation have its own cycle (with the same duration). You can try tweaking it to make the total of delay time and duration of all the animations equal but the adjustment is very hard to do. I would create different keyframes (as well as animations) for each element. Here is the code (for 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;}
}
Updated demo

Answer 2

I'm pretty sure you can not restart the animation onclick by using CSS alone. You will need to use 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();
});