Bug 28266 - CSS Animation does not animate multiple background positions
Summary: CSS Animation does not animate multiple background positions
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2009-08-13 10:20 PDT by Joshua Dickens
Modified: 2009-08-15 18:32 PDT (History)
1 user (show)

See Also:


Attachments
Work in progress (7.38 KB, patch)
2009-08-14 09:11 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff
Patch (20.18 KB, patch)
2009-08-15 11:18 PDT, Simon Fraser (smfr)
andersca: review+
Details | Formatted Diff | Diff
Patch for multiple shadow animation (8.70 KB, patch)
2009-08-15 12:24 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff
Patch for multiple shadow animation (8.85 KB, patch)
2009-08-15 16:39 PDT, Simon Fraser (smfr)
andersca: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joshua Dickens 2009-08-13 10:20:43 PDT
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;
                }
 }
Comment 1 Simon Fraser (smfr) 2009-08-13 11:29:02 PDT
There are several other properties for which we only animate the first one (e.g. shadows). We should fix them all.
Comment 2 Simon Fraser (smfr) 2009-08-14 09:11:56 PDT
Created attachment 34844 [details]
Work in progress
Comment 3 Simon Fraser (smfr) 2009-08-15 11:18:35 PDT
Created attachment 34900 [details]
Patch
Comment 4 Simon Fraser (smfr) 2009-08-15 12:24:59 PDT
Created attachment 34903 [details]
Patch for multiple shadow animation
Comment 5 Simon Fraser (smfr) 2009-08-15 16:36:51 PDT
Comment on attachment 34903 [details]
Patch for multiple shadow animation

This patch is reversing the shadows.
Comment 6 Simon Fraser (smfr) 2009-08-15 16:39:38 PDT
Created attachment 34907 [details]
Patch for multiple shadow animation
Comment 7 Anders Carlsson 2009-08-15 17:57:35 PDT
Comment on attachment 34907 [details]
Patch for multiple shadow animation

r=me
Comment 8 Anders Carlsson 2009-08-15 18:02:19 PDT
Comment on attachment 34900 [details]
Patch

r=me