1

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;}
}
ddpatty
  • 13
  • 1
  • 5
  • In order to loop things you need two copies of the content to allow the end and the beginning to be side-by-side. When the boundary between the two goes off the screen, reset the position to the start-point and start again. – Diodeus - James MacFarlane Jun 11 '14 at 19:39
  • I did not explain very well what I wanted to do so I edited a bit. Do I have to have two copies in this case? – ddpatty Jun 11 '14 at 20:26

2 Answers2

4

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

King King
  • 61,710
  • 16
  • 105
  • 130
1

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

});
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • I'm sure the problem can be solved using CSS animation. However it requires different animations for each element. It also requires time testing ... because cycling it is really not something easy to imagine. Also your code does not loop it. I doubt that the OP wants to loop it (look like a banner) until user clicks on the button and some pop-up jumps out... – King King Jun 11 '14 at 20:05
  • I'd very very interested to see a CSS only click solution for this. – Kevin Lynch Jun 11 '14 at 20:06
  • why do you think the OP needs a click handler here? He wants to loop it (like a clock, runs cyclically). – King King Jun 11 '14 at 20:07
  • here is the pure CSS demo (does the similar thing to your code) http://jsfiddle.net/viphalongpro/Ng3Qf/3/ Although it's hacky, hard to control the behavior, ... but it's the way to make it pure CSS. However it's just an example which does not show the OP's problem. – King King Jun 11 '14 at 20:27
  • I edited my post. I guess I did not explain well what I wanted to do. Without clicking this button, I want to show, First Hello Second add Hi (Hello stays there) Third add button (Hello and Hi stay there) Then, 3 of them disappear. Repeat these actions. This was what I want to do. – ddpatty Jun 11 '14 at 20:56