[css-animations] new property suggestion: animation-iteration-delay

One feature I find lacking in the webkit implementation of animations is the ability to delay subsequent iterations of an animation. 

For example, say i have an animation that lasts 2 seconds that I want to run every 10 seconds -- for example, if i want an element to display for 2seconds every 10 seconds i may write my keyframe declaration like so:

@animation 'showbriefly' {
	0%, 20%, 100% {opacity: 0;}
	1%, 19% {opacity: 1;}
} 

.showElement {
	animation-name: 'showbriefly';
	animation-duration: 10s;
	animation-iteration-count: infinite;
} 

This simple example is doable, since i am only showing and hiding, and there are really only 2 states, but the more complex an animation with the more elements that are using that animation at different delays and times, the crazier my code becomes.

My stop gap measure has been to run the animation once, remove the class on webkitAnimationEnd, and add the class back on with a setTimeout or with WebkitAnimationEnd of a separate animation.... or to make the animation run completely from keyframes 0 to 20% or so, and just idle doing nothing from 20% to 100% as in the above example... but much more complex as my animations are more complex.  this method is not robust. If i create 4 elements that need to be animated sequentially indefinitely, i can calculate that. But what if i want to add a 5th element? I have to redo all the keyframe % or use JS.

I would prefer to write the animation this way:

@-webkit-animation 'showhide' {
	0%,100% {opacity: 0;}
	5%, 95% {opacity: 1;}
} 

.showElement {
	animation-name: 'showhide';
	animation-duration: 2s;
	animation-iteration-count: infinite;
        animation-iteration-delay: 8s;
} 

-Estelle
http://standardista.com

Received on Monday, 23 May 2011 04:43:52 UTC