[css-animations] Which keyframe rule applies when keys are duplicated?

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