How to make CSS3 animation play on a loop

Question

I have this setup that I would like to play on repeat. I'm not great with jQuery so wondered if someone could show me how?

DEMO

$('.title1').fadeIn('fast', function() {
    $('div').addClass('animated pulse');
});

$('div').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend    
animationend', function() {
    $('.title1').fadeOut(2000);
});

Any reason why you can't use CSS instead of the fadeOut()? You can add it to the end of your CSS animation. If you post your CSS animation code, I'd be happy to show you what I mean. — moettinger
– moettinger, Commented Mar 26, 2014 at 2:35
Hey thanks for your response I'd be curious to see how you suggest I achieve this with css. My slider looks like this jsfiddle.net/akZ48/5 and I'd want each title to fade in pulse and then fade out over each slide. — user2498890
– user2498890, Commented Mar 26, 2014 at 7:08

JF it · Accepted Answer · 2014-03-24 16:58:23Z

2

http://jsfiddle.net/jFIT/86KLb/7/

Just wrap it all in a function and call it from the callback of fadeOut..

 doIt();

function doIt(){
  $('.title1').fadeIn('fast', function() {
      $('div').addClass('animated pulse');
  })
  $('div').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend    animationend', function() {
    $('.title1').fadeOut(2000, function() {doIt();});
  });
};

answered Mar 24, 2014 at 16:58

JF it

2,3833 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make CSS3 animation play on a loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related