Infinite background-image animation loop

Aug 13, 2014

—

After I redesigned the “How Does Akismet Work” page, I realized the spam sorter graphic was just itching to be animated. Converting the main machine box into a gif with some flashing lights was easy enough. The conveyor belt is what gave me some trouble. I’m posting my solution here because the bug I came across was something so simple to fix and I just didn’t see it.

Spam Sorting Machine

This should be easy

The effect was to have the comment bubbles move left to right as if they’re going through the machine. Since this entire graphic is composed of empty divs with background images in the HTML (this was done in order to make the conveyor belt repeatable and expand to the edge of the browser regardless of size), making them move was a simple matter of changing the background-position.

Easy, I’ll just use a simple .animate() on the comment bubbles.

https://gist.github.com/danhauk/5e5d903fafcf4cd42020

Perfect! Now to do some cross-browser testing.

Uh oh, Firefox

Next step was to jump over to Firefox to make sure it worked before committing the changes. Here’s where I ran into the problem, it didn’t work in Firefox. I racked my brain and did some searching to figure out why it would work perfectly in Chrome but not in Firefox.

It turns out (and I think I knew this already at some point) Firefox doesn’t support background-position-x and background-position-y. So I was trying to animate a property that couldn’t be animated.

My Solution

The solution was simple. Just remove -x from the background-position property and viola. My final code:

https://gist.github.com/danhauk/e39feef20ddcc932a073

Why not use CSS transitions?

I was originally going to go the route of using CSS transitions, but I wanted more browser support, particularly IE9. If you want to use CSS transitions instead of the jQuery .animate() function here’s what I was using.

https://gist.github.com/danhauk/3744611109326451fa30

Using CSS is the only way I found to animate on both the x and y axis. But I couldn’t figure out how to keep it in a continuous loop, for example continuously moving an image diagonal. If you know of a way to do that, whether it’s via CSS or Javascript, feel free to comment below or get in touch [http://twitter.com/danhauk](on Twitter).

Comments

6 responses to “Infinite background-image animation loop”

Sandy

August 14, 2014

That’s very cool. Would something like this work with just css
.big-spam-sorter--comments-left, .big-spam-sorter--comments-right { -webkit-animation: slide 2s linear infinite; -moz-animation: slide 2s linear infinite; animation: slide 2s linear infinite; } @-webkit-keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} }
@-moz-keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} }
@keyframes slide { 0% {background-position: 0 0;} 100% {background-position: 100px 0;} }

Reply
1. Dan Hauk
  
  August 14, 2014
  
  I explored @keyframes briefly, but the problem that I came across is that I can’t incrementally increase the background position to continue the movement.
  
  In your example the comment bubbles would move 100px to the right, then move back to their starting position at 0. Instead of continuing to move to the right as if on a conveyor belt, they would just move back and forth.
  
  This is why I used jQuery to move the background position since I can use '+=102' to move the background by 102px regardless of current position.
  
  Reply
Sandy

August 14, 2014

Ah yes I see what you mean. It’s an interesting question, you would think there should be away to do this with only css.

Reply
Ibrahim Vatih

January 11, 2015

This is what I need. Thank you 😀

Reply
Wadiyo

June 3, 2016

nice share.
Thanks Dan

Reply
Mas Budi

September 5, 2018

Exactly what I need! 🙂

Reply