How to loop animated text banners using css keyframes

Question

I want to loop this text ads banner using css keyframes.

1. first shown text1
2. second added text2 (text1 stays there)
3. third added button (text1 and text2 also stays there)
4. then disappear 3 of them
5. and again shown text1
6. second added text2 (text1 stays there)
7. 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