W3C home > Mailing lists > Public > www-style@w3.org > March 2014

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

From: Sylvain Galineau <galineau@adobe.com>
Date: Fri, 21 Mar 2014 00:38:30 +0000
To: "<www-style@w3.org>" <www-style@w3.org>
Message-ID: <F54BA9CA-A6DA-446B-8483-C933C481A0F8@adobe.com>

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

This archive was generated by hypermail 2.3.1 : Friday, 21 March 2014 00:39:15 UTC