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

On 23/05/2011 2:43 PM, Estelle Weyl wrote:
> 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.

That is what I referred to as percentages craziness in this thread.

http://lists.w3.org/Archives/Public/www-style/2011Apr/0698.html


> 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


Would this work better?



@animation 'showbriefly' {
     0s, 1900ms {opacity: 1;}
     2s, 10s {opacity: 0;}
}

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


If the class showElement already had opacity: 0 declared, then it could 
be simpler.

@animation 'showbriefly' {
     0s, 1900ms {opacity: 1;}
}

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




-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 23 May 2011 05:15:11 UTC