Howdy css-tricks forum people – I visited gap.com earlier today and noticed a subtle ‘flag-wave’ effect on a “Everyday Free Shipping” label and thought it was nice. However, it was created using Flash. I thought, “Hey, I could make that with CSS3!” So, I went to work. What I thought would be simple, turned out to be more complicated that I thought;
Here is the result before I talk about how I arrived there;
http://jsfiddle.net/meetaaronsilber/uLuWa/
Originally I figured I could simply create a background gradient for the container div and animate the stops in the gradient so that they would pan left-to-right. However, I found that you cannot animate background gradients this way.
Next I thought I could make the gradients start with negative-value color stops (which works) and animate using background-position percentages. However, the result looked like the gradient was rendered only within the div and when animated, cut off suddenly as it panned into the container div.
I found that I could actually increase the “background-size” to 200%, position the “background-position” right, and then animate the background using pixel values (percentages will not work for some reason; bug?). I also had to work with the pixel values for the offset and the gradients so that the infinite animation wouldn’t jerk at the end. Its possible to get a seem-less result, but I didn’t bother (as I was happy just to have it working). Enjoy!
