- From: Sara Soueidan <sara.soueidan@gmail.com>
- Date: Wed, 04 Jun 2014 21:12:06 +0000
- To: www-style@w3.org
- Message-ID: <CADs4uuRpgvPsVkOts+CQPJOrpTAC7=P+VQbXoZVjYYr_hbz8VQ@mail.gmail.com> (sfid-20140604_211212_008178_223C510E)
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