webkit animation props

Question

is there a way to get a webkit animation to run indefinitely?

Answer 1

There certainly is:

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

img.pulse { opacity: 0.75; }
img.pulse:hover { 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 10; 
}

This was taken from the source, here

The important parts to observe (obviously, I suppose) are those within the keyframes @-webkit-keyframes pulse {/*...*/}, defining the animation's name 'pulse' the from (start), 50% mark, and to (end) (which you'll notice is exactly the same as the from declaration, to give the impression of seamless animation.

On second thoughts, it seems that -webkit-animation-iteration-count: 10; might present a problem, as regards 'infinite.' Omitting this property means the animation occurs once, setting the value to 0 (as expected) prevents the animation occurring at all.

So, perhaps not infinite, but it seems happy with a value of 3000, so presumably other similarly-large numbers would be do-able.

Revised demo with super-large -webkit-animation-iteration-count of over nine-thousaaaaaand...

---

Edited in surprise:

Apparently infinite is, in fact, a valid argument for the -webkit-animation-iteration-count. See the newest demo, at jsbin (again).