Re: Ignored Properties Inside a @keyframes block

[Sorry for the delay; it looks like our moderation archives were just
now cleared.]

On Wed, Jun 4, 2014 at 2:12 PM, Sara Soueidan <sara.soueidan@gmail.com> wrote:
> Hi!
>
> My name is Sara (http://sarasoueidan.com). I was going over the animations
> spec (http://www.w3.org/TR/css3-animations/) and read this:
>
> "The keyframe declaration block for a keyframe rule consists of properties
> and values. Properties that are unable to be animated are ignored in these
> rules, with the exception of ‘animation-timing-function’"..
>
> In a bunch of simple demos that me and Greg Whitworth  created to test
> certain properties, it turned out that Chrome will apply a background image
> to an element when the background-image property is specified inside the
> @keyframes block. As a matter of fact, the background image will even be
> animated, even though it is specified as a non-animatable property. A demo
> can be found here: http://jsfiddle.net/8HFGa/7/
> Firefox and IE do not animate the background image.
>
> Similarly, the z-index property will also be applied, though it will be
> ignored in Firefox.
>
> My question is: what properties will be ignored when they are included in an
> @keyframe rule? And does "ignored" mean that they will have no effect at all
> (as if they're not specified)? or does it mean that they simply won't be
> interpolated?
>
> The spec isn't very clear about this. Some properties listed as
> non-animatable are animated in some browsers. So this is a bit confusing.
>
> Thank you very much!

This is a somewhat complicated question, because we've resolved on
changes for it but they haven't all been applied to the spec.  In
particular, some time ago we resolved that "non-animatable" properties
should still animate, by just flipping from the start value to the end
value at 50% of the transition's progress.  Nobody implements this
yet, but it's still intended behavior, afaik.

WebKit/Blink's treatment of background-image is due to the Images spec
extending the interpolation definitions and allowing <image> values to
the interpolated:
<http://dev.w3.org/csswg/css-images/#interpolating-images>.  Firefox
just hasn't implemented this yet.

z-index is definitely animatable:
<http://dev.w3.org/csswg/css-transitions/#animatable-properties>

~TJ

Received on Wednesday, 23 July 2014 14:33:14 UTC