- From: Estelle Weyl <estelle@weyl.org>
- Date: Sun, 22 May 2011 23:19:08 -0700
- To: Alan Gresley <alan@css-class.com>
- 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>
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 UTC