- From: Sylvain Galineau <galineau@adobe.com>
- Date: Fri, 8 Aug 2014 17:07:54 +0000
- To: "<www-style@w3.org>" <www-style@w3.org>
This is a follow-up to a previous thread [1] and a recent telcon discussion [2] on this topic. 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) Using dbaron's telcon example: @keyframes A { 0% { font-size: 32px; width: 10em } 50% { width: 15em } 100% { font-size: 64px; width: 20em} } #elem { animation: A linear 5s; font-size: 16px } What value do we expect for the width property at 0%/0s, 50%/2.5s and 100%/5s ? Likewise, what happens if the font-size and width properties are animated separately? @keyframes B { 0% { font-size: 32px } 100% { font-size: 64px } } @keyframes C { 0% { width: 10em } 50% { width:15em } 100% { width: 20em} } #elem { animation: B linear 5s, C linear 10s; font-size: 16px } Though the discussion was somewhat confusing - on the phone, timelines are hard - I think we covered these three approaches: A. Properties in a keyframe rule do not influence each other i.e. the width property computes against the font-size: 16px set by the #element rule. font-size 0s 2.5s 5s A 32px 48px 64px B 32px 48px 64px width 0s 2.5s 5s 10s A 160px 240px 320px C 160px 200px 240px 320px B. Animating a property affects the computed value of all properties that depend on it. This doesn't change the interpolation of font-size but width now resolves against the animating font-size property: font-size 0s 2.5s 5s A 32px 48px 64px B 32px 48px 64px width 0s 2.5s 5s 10s A 320px 720px 1280px C 320px 640px 960px 320px (Note: C ends at 320px because B ends at 5s, does not fill forward thus C computes against font-size:16px after the 5s mark) C. Animated property values can resolve values against properties animated in the same @keyframes rule i.e. if font-size is animated and width is animated in EMS, the width animates against the interpolating font-size. If the font-size is animated by a separate animation, it is not 'seen' i.e. C will animation against font-size: 16px. font-size 0s 2.5s 5s A 32px 48px 64px B 32px 48px 64px width 0s 2.5s 5s 10s A 320px 720px 1280px C 160px 200px 240px 320px In this specific case, Gecko, WebKit and Blink follow C. Trident appears to do B. Feedback of which you think is best and why is helpful. Examples to explain why you think one approach is worse/better are encouraged. And of course, if I missed something or incorrectly represented an approach, do chime in. [1] http://lists.w3.org/Archives/Public/www-style/2014Jul/0297.html [2] http://lists.w3.org/Archives/Public/www-style/2014Jul/0617.html
Received on Friday, 8 August 2014 17:08:43 UTC