HTML5/CSS3 - how to make “endless” rotating background - 360 degrees panorama

Question

i have a JPG image with the 360 degrees view of the city (9000px by 1000px). I need to create a page with endlessly rotating background - giving user an impress

Answer 1

You can do this without jquery by using CSS3 animations. I'm assuming the city background image is set up to repeat-x seamlessly on the container.

You set up your keyframes to animate the background image the width of the repeatable image and tell it to loop infinitely with no delay. For example, my drifting clouds image is 1456 px wide and repeats x:

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

Make sure you set @-webkit-keyframes, @-moz-keyframes, @-o-keyframes and -webkit-animation, -moz-animation, -o-animation the same to cover FF, Safari and Chrome.

http://jsfiddle.net/JQjGZ/