W3C home > Mailing lists > Public > www-style@w3.org > May 2011

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

From: Estelle Weyl <estelle@weyl.org>
Date: Sun, 22 May 2011 23:19:08 -0700
Cc: "www-style@w3.org CSS" <www-style@w3.org>, cmarrin@apple.com, hyatt@apple.com, Dean Jackson <dino@apple.com>
Message-Id: <92ABDDB2-8F77-44FA-9F9C-C25A0EEFE46A@weyl.org>
To: Alan Gresley <alan@css-class.com>

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. 

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.

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.  

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
Received on Monday, 23 May 2011 06:19:58 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:40 GMT