The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 Flag Wave Ribbon (animated)

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #31863

    Howdy css-tricks forum people – I visited 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;

    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!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.