- From: Sylvain Galineau <galineau@adobe.com>
- Date: Fri, 21 Mar 2014 00:38:30 +0000
- To: "<www-style@w3.org>" <www-style@w3.org>
Given the following animation: @keyframes testing { 100% { width: 1000px; background-color: red; } 100% { width: 100px; background-color: yellow; } 100% { background-color: blue; } 100% { height: 400px; } } ...what happens between 0% and 100%? In css-animations, we have [1]: # To determine the set of keyframes, all of the values in the selectors are sorted # in increasing order by time. If there are any duplicates, then the last keyframe # specified inside the @keyframes rule will be used to provide the keyframe information # for that time. There is no cascading within a @keyframes rule if multiple keyframes # specify the same keyframe selector values. As such I would expect the animation above to be equivalent to: @keyframes testing { 100% { height: 400px; } } This is true for IE11, WebKit and Blink. Gecko appears to 'compute' the animation above to: @keyframes testing { 100% { width: 100px; background-color: blue; height: 400px; } } i.e. duplicate keys appear to be resolved on a per-property basis. Is this a known bug or deliberate? [1] http://www.w3.org/TR/css3-animations/#keyframes
Received on Friday, 21 March 2014 00:39:15 UTC