Re: [css3-animations] or?

On 20/04/2011 7:03 AM, Rik Cabanier wrote:
> On Mon, Apr 18, 2011 at 4:21 AM, Alan Gresley<alan@css-class.com>  wrote:

>> The drawback with well timed keyframes on different elements is the
>> animation itself (or multiple animations) is of specific time periods where
>> the keyframes only allow values ranging from 0% (from) to 100% (to). To
>> create a long animations (split up in groups), one has to query via JS when
>> one animation has ended before another animation can be triggered by JS.
>>
>
> 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.


    translateZ(15000px) /* Original */

    translateZ(30000px) /* New */


Is there a limit that one can hit in using pixels?


Another case, lets say the animation is 50 seconds,

     @keyframes move {
       from { left: 0px }
       20%  { left: 100px }
       40%  { left: 200px }
       60%  { left: 300px }
       80%  { left: 400px }
       to   { left: 500px }
     }

with this shorter animation just running for 5 seconds starting at 10s 
(20%) to 15s (25%). I may have more than one animation running.

     @keyframes spin {
       from, 20%  { transform: rotateX(0deg) rotateY(0deg) }
       21%  { transform: rotateX(45deg) rotateY(0deg) }
       25%, to  { transform: rotateX(45deg) rotateY(90deg) }
     }


What do I do if I change the animation to run for 150s seconds by adding 
50 seconds extra before and 50 seconds extra after? This initial 50 
seconds is now timed to run from 50 seconds to 100 seconds. Currently I 
have to do this.


     @keyframes move {
       from, 33.33% { left: 0px }
       39.96%  { left: 100px }
       46.63%  { left: 200px }
       53.3%  { left: 300px }
       59.96%  { left: 400px }
       66.6%, to   { left: 500px }
     }

     @keyframes spin {
       from, 33.33%  { transform: rotateX(0deg) rotateY(0deg) }
       34%  { transform: rotateX(45deg) rotateY(0deg) }
       36.66%, to  { transform: rotateX(45deg) rotateY(90deg) }
     }


Does one need a calculator, or very good maths skills?


I would have no problems if there were animation groups and/or if timing 
was in seconds instead of percentages.


>> I am seeing two ways around this using just CSS.
>>
>>   Example 1:
>>
>>     @keyframes name {
>>       0s   { ... }
>>       10s  { ... }
>>       20s  { ... }
>>       30s  { ... }
>>       40s  { ... }
>>       50s  { ... }
>>     }

[snipped some examples]

>> These methods would make it a lot easier to create long animations.
>> Currently I am having to play animations for over many seconds or even
>> minutes to see the results of something that occurs at say 70 seconds. Being
>> able to use either of the above methods would mean that an author can test
>> one sequence (clip) of a larger animation.
>>
>>
> WebKit's proposed scrubbing APIs will be very useful since they will let you
> fast forward, pause and rewind animations.
>
> Rik


OK, this may help. Timing is crucial but it needs to be an exact period 
in time and movement (speeds, etc.) has to be running correctly. I don't 
want to think about if some of the animation was fired by a JS control 
action.


Alan


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

Received on Thursday, 21 April 2011 04:49:26 UTC