Ignored Properties Inside a @keyframes block

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!

Received on Wednesday, 23 July 2014 14:21:24 UTC