Re: [css-animations] When/how are keyframe values computed?

On Friday 2014-08-08 17:07 +0000, Sylvain Galineau wrote:
> We know css-animations interpolate the computed value of the properties being animated. We want to clarify how the animating values are computed when they depend on the value of another property. (We will cover the application of non-animatable properties separately)
[...]
> Though the discussion was somewhat confusing - on the phone, timelines are hard - I think we covered these three approaches:

So after the call, I actually tried to divide things out into seven
possible approaches.  I had lettered mine as A-G, for what base
values are used to find the computed value of an animating property:

 A) Base values are static values only.
 
        Between options (A) and (B) this example:
          @animation a { from { font-size: 20px; text-indent: 1em } }
          div { font-size: 10px; animation: a linear 1s }
        changes from animating text-indent from 10px (A) to doing so
        from 20px (B).

 B) Base values are static values plus other values in same keyframe
    rule.
    
        Between options (B) and (C) this example:
          @animation a { from { font-size: 20px } from { text-indent: 1em } }
          div { font-size: 10px; animation: a linear 1s }
        changes from animating text-indent from 10px (B) to doing so
        from 20px (C).

 C) Base values are static values plus other values in all keyframe
    rules in this @keyframes rule at same time.
    
        Between options (C) and (D) this example:
          @animation a {
            from { font-size: 20px }
            50% { text-indent: 1em }
            to { font-size: 40px }
          }
          div { font-size: 10px; animation: a linear 1s }
        changes its text-indent at the 50% time from 10px (C) to
        30px (D).

 D) base values are static values plus interpolated values from
    this @keyframes rule.

        Between options (D) and (E) this example:
          @animation a {
            from { font-size: 20px }
            to { font-size: 40px }
          }
          @animation b {
            50% { text-indent: 1em }
          }
          div { font-size: 10px; animation: a linear 1s, b linear 1s; }
        changes its text-indent at the 50% time from 10px (D) to
        30px (E).

 E) base values are static values at animation start time plus
    interpolated values from animations underneath this one (in
    cascading order) and this one, on the element to which this
    animation applies

        Between options (E) and (F) the example from the (D)-(E)
        change modified to use the style with the animation property
        in the reverse order:
          div { font-size: 10px; animation: b linear 1s, a linear 1s; }
        makes the same change.

 F) base values are static values inherited from other elements at
    animation start time plus interpolated values from all animations,
    both under and over this one, on this element

        Between options (F) and (G) this example:
          @animation a {
            from { font-size: 20px }
            to { font-size: 40px }
          }
          @animation b {
            50% { text-indent: 1em }
          }
          div { font-size: 10px; animation: a linear 1s; }
          div > * { animation: b linear 1s }
        changes the div's child's text-indent at the 50% time from 10px
        (F) to 30px (G).

 G) base values are interpolated values from all animations on this
    element and on all elements on which its computed values depend

Our options A are the same.  I'm not sure if your option B is my F or my
G.  I'm not sure if your option C is my B, my C, or my D.


Then there's a sub-choice for options E and F and G:

 α) base values are static (i.e., chosen based on the animations
    known to apply at a certain future time when this animation is
    started)

 β) base values are dynamic (i.e., if the expected value at a future
    time changes the running animation changes to match)

(Note that we already chose static for the implicit 0% and 100%
keyframes, I believe.)


I agree that F or G does sound nice.  But it has a bunch of
complexity, with either variant α or β, particularly once repeating
animations are considered.

With variant α (static), it requires storing at the time the
animation starts the data needed to compute a potentially infinite
sequence of future values for a repeating animation whose base
values are going to be changing over time.  The worst cases involve
multiple repeating animations running at durations that do not have
a common integer multiple.

With variant β (dynamic), at least for (F) and (G), although not
necessarily (E), requires in at least some cases calculating the
base values for every tick of the animation, since the dependency
order for computed values between different properties (which does,
we believe, have a noncyclic dependency graph) need not match the
cascading order of the animations.  (For (F), it's possible this
might not be needed now, but would suddenly be needed if we
introduced a unit in which line-heights could be used as a
measurement unit, since that could introduce quadratic animations
with the font-size -> line-height -> other length dependency.  For
(G), this complexity is clearly a problem now just based on
inheriting font-size animations between enough elements forming at
least any a * t^n + b function, for time t, constants a and b, and
integer constant n.)


I would not want to commit to (E), (F), or (G) without somebody
having implementation experience handling both the repeating
animations issue and handling sending such animations to be run on
the compositor.

And as I said in the telecon [1], I think this issue is complicated.

-David

[1] http://lists.w3.org/Archives/Public/www-style/2014Jul/0617.html

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)