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

[Estelle Weyl:]
> 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

+1. The ability to set a delay between iterations is important. The alternative
involves :
1) Updating the animation time to include delays
2) Create a new keyframe to represent the delay
3) Recalculate the % of the remaining keyframes.

This should be built in. One shouldn't need a spreadsheet or script to handle this
simple scenario.

Received on Tuesday, 24 May 2011 03:41:07 UTC