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/