- From: Alan Gresley <alan@css-class.com>
- Date: Sun, 24 Apr 2011 05:43:02 +1000
- To: Rik Cabanier <cabanier@gmail.com>
- CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Andrew Fedoniouk <news@terrainformatica.com>, www-style@w3.org, Simon Fraser <smfr@me.com>
CC Simon Fraser
On 21/04/2011 2:48 PM, Alan Gresley wrote:
> On 20/04/2011 7:03 AM, Rik Cabanier wrote:
[snip]
>> Your proposal is about making the CSS easier to author, correct?
>> You can already create these long animations with very long keyframes
>> today...
>
>
> Yes, but what if you decide to change the length of the animation? Lets
> say from an original 50 seconds to 100 seconds. Just this change makes
> the animation twice as slow and what happened at 20% during the original
> length must now happen at 10% for the correct timing.
>
> You may want to keep the events that happened from 20% to 40% in the
> original animation (10 seconds) to still happen at the same range of 20%
> to 40% (now 20 seconds). If this was an indication of something speeding
> off into the distance by translation, you must now double the distance
> of this translation so the acceleration is the same.
[snip]
Here is a demo (view in Safari) which is the hardest CSS I have ever coded.
http://css-3d.org/flight-of-the-venturer.htm
Originally the animation was for 100 seconds. The first 20 seconds was
good and the last 30 second was good but overall, the animation was to
long. To avoid percentage craziness, I cut the animation to run for 50
seconds.
Since I wanted to keep the first part and the last part of the animation
the same, I simply changed these percentages.
5% -----> 10%
10% -----> 20%
15% -----> 30%
20% -----> 40%
and
75% -----> 50%
90% -----> 80%
95% -----> 90%
The dilemma was what was from 20% to 75% (55 seconds) in the original
100 second animation had to be shrunk into 40% to 50% (10 seconds) in
the shorter 50 second animation (this is a somewhat simple explanation,
it was awful and frustrating).
If I could do keyframes in seconds instead of percentages, I would only
have to change the later parts by changing 100s to 50s and 75s to 25s.
The whole animation itself would work as one animation group. If I
wanted to (no really), I could add another chapter. This I would much
prefer to do by having another group. This second group of the animation
would be easier to create by just commenting out the first group and
starting the second group at zero seconds.
Time to rest my brain.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Saturday, 23 April 2011 19:43:34 UTC