Bug 28266 – CSS Animation does not animate multiple background positions

• Component: CSS
• Status: RESOLVED FIXED

[Joshua Dickens]

When multiple background images are defined on an element, it is currently only possible to animate the first background image via CSS Animation keyframes.  

Steps to reproduce:

1) Create an element with the 'animated' class assigned
2) define the class to use multiple background images
3) add an animation keyframes set that animates the second background image's x-position

Results
Background position does not animate

Expected
Background position should animate

Sample CSS:
.animated {
		background-repeat: repeat-x;
          	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(255,255,255,0)), to(rgba(255,255,255, 1))), url('someimage.png');
  		 -webkit-animation-name: 'my-animation';
          	 -webkit-animation-duration: .3s;
          	  -webkit-animation-iteration-count: infinite;
          	  }

 @-webkit-keyframes my-animation {
          	    from {
          	      -webkit-animation-timing-function: linear;
          	      background-position-x: 0px, 0px;
			// alternatively: background-position: 0px 0px, 0px 0px;
                }
                to {
                  -webkit-animation-timing-function: linear;
                  background-position-x: 0px, 20px;
		// alternatively: background-position: 0px 0px, 20px 0px;
                }
 }

[Simon Fraser (smfr)]

There are several other properties for which we only animate the first one (e.g. shadows). We should fix them all.

[Simon Fraser (smfr)]

Created attachment 34844 [details]
Work in progress

[Simon Fraser (smfr)]

Created attachment 34900 [details]
Patch

[Simon Fraser (smfr)]

Created attachment 34903 [details]
Patch for multiple shadow animation

[Simon Fraser (smfr)]

Comment on attachment 34903 [details]
Patch for multiple shadow animation

This patch is reversing the shadows.

[Simon Fraser (smfr)]

Created attachment 34907 [details]
Patch for multiple shadow animation

[Anders Carlsson]

Comment on attachment 34907 [details]
Patch for multiple shadow animation

r=me

[Anders Carlsson]

Comment on attachment 34900 [details]
Patch

r=me

[Simon Fraser (smfr)]

http://trac.webkit.org/changeset/47331
http://trac.webkit.org/changeset/47332