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

On 23/05/2011 4:19 PM, Estelle Weyl wrote:
>
> On May 22, 2011, at 10:14 PM, Alan Gresley wrote:
>
>>
>>
>>> 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;
>>> }
>>
>>
>> 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;
>> }
>>
>>
>
> While I think adding time is a good idea, i don't think it is a
> replacement for percentages. By defining keyframes in terms of
> seconds or milliseconds, we would have to write separate keyframe
> definitions for each different iteration.


I not talking about replacing percentages. I would like to use both 
percentages and time values in keyframes.


> While an site author may want shows and hides to all take 0.2s,
> making time instead of percentage seem like the best method, not all
> animations  may work, if i were creating a falling snow effect, i
> wouldn't want to have to create hundreds of animations, one for each
> snowflake. it would be easier to randomly assign durations and timing
> functions with reusable animations than to have to create numerous
> animations which still need to have their duration and timing
> functions defined.


True. I will add that changing a step in a keyframe from 10% to 5% in 
some animations doubles the perception of speed in movement.


> An example is my camera flashes:
> http://standardista.com/sandbox/lighbursts.html (BTW, it is more
> efficient to use PNGs than such huge gradients, but it was just a
> playground. Also, only working in Safari) each flash has a different
> delay and a different duration.


I can see why you have used percentage here since you have most of the 
action happening due to have 20 delays hooked into 4 keyframes. My 
question is, what would you do if you decided that halfway through 
creating the animation, you decided to add another aspect to the 
animation but this now required the animation to run for 30 seconds?

When I did my 'Flight of the Venturer' animation, it initially ran for 
100 seconds and I then decided to make it shorter. It was far easier for 
me to half the timing of the animation (2:1) since any other ratio (3:2 
or 3:1) would have been chaotic when working with percentages that had 
to be scaled (time wise).


> It would be great to be able to pass variables,. In the above
> example, I have added different animations for different 'hanging'
> opacities. However, it seems premature to add variables. When
> variables are better defined in general, adding variables to
> animation should be visited. In the meantime, as a site author, the
> ability to add delays to iterations outside of the keyframe
> definition would be invaluable, and i reiterate my request to have
> animation-iteration-delay added to the specifications.
>
> -Estelle http://www.standardista.com


I agree with this. Maybe it was not best to suggest keyframes with time 
values in this thread but they would have been useful when doing this 
animation (same as yours, only working in Safari).

http://css-3d.org/flight-of-the-venturer.htm


I first mentioned about having time values in this thread which started 
out talking about animation groups.

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



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

Received on Monday, 23 May 2011 09:19:57 UTC