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; } }
There are several other properties for which we only animate the first one (e.g. shadows). We should fix them all.
Created attachment 34844 [details] Work in progress
Created attachment 34900 [details] Patch
Created attachment 34903 [details] Patch for multiple shadow animation
Comment on attachment 34903 [details] Patch for multiple shadow animation This patch is reversing the shadows.
Created attachment 34907 [details] Patch for multiple shadow animation
Comment on attachment 34907 [details] Patch for multiple shadow animation r=me
Comment on attachment 34900 [details] Patch r=me
http://trac.webkit.org/changeset/47331 http://trac.webkit.org/changeset/47332