Board Thread:General Discussion/@comment-24431687-20151102024741/@comment-1757994-20151103065615

So first let's do some math. The "background" image is 1500x100px. The "foreground" image is 124x80px. So the boat "sails" 1624px. You're currently using the HTML marquee tag, specifying 1 pixel per 85 msec. That's an animation of 1624/0.085 = 138 sec.

The wrapper div defines the viewport. Start the boat with its left edge at -124px, because that puts it just outside the viewport to the left. End with the left edge at 1500px, because that puts it just outside the viewport to the right.

BTW, I avoid using :last-child below because IE8 can't handle :last-child, so I just specify that the animated part is the img after the first img. I put both images inside the div. You could define one to be a background in CSS, but this way you can use any images that are 1500x100px and 124px just by editing the article page instead of the CSS.

 .sail-wrapper { height: 100px; margin: 0 auto; overflow: hidden; position: relative; width: 1500px; }
 * in common.css

.sail-wrapper > img:first-child + img { bottom: 0; left: -124px; position: absolute; -webkit-animation: sail 138s linear infinite; -moz-animation: sail 138s linear infinite; -o-animation: sail 138s linear infinite; animation: sail 138s linear infinite; }

@-webkit-keyframes sail { 0%  { left: -124px; } 100% { left: 1500px; } }

@-moz-keyframes sail { 0%  { left: -124px; } 100% { left: 1500px; } }

@-o-keyframes sail { 0%  { left: -124px; } 100% { left: 1500px; } }

@keyframes sail { 0%  { left: -124px; } 100% { left: 1500px; } }


 * on the main page or wherever