CODEWITHSUNDEEP
htmlcssmarquee
Oontzie
Oontzie

Reputation: 37

Animate Marquee Image in CSS3

I'm trying to animate an image with CSS3, but I can't seem to get it right. I want the image to wrap around and infinantly scroll across the page, but I can't even get it to animate. My HTML is simple:

<div id="space" class="marquee">
</div>

and my CSS:

    #space {
background-image:url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
width:100%;
position:absolute;
left:0;
top:0;
height:384px;
}
.marquee{
overflow: hidden;
     -webkit-animation: marquee 50s linear infinite;
}

@keyframes marquee {
0%   { left:0 }
100% { left:100% }
}

Demo: http://jsfiddle.net/9op2t9wa/

Upvotes: 1

Views: 8352

Answers (5)

Matthieu Charbonnier
Matthieu Charbonnier

Reputation: 2982

Fairly simple, use the built-in default repeat of the background-image, and animate the background-position :

.imageMarquee
{
    height: 180px; /* Any size you want */ 
    background-image:url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
    animation: imageMovement 5s linear infinite;
}

@keyframes imageMovement {
    100% {
        background-position-x: 320px; /* width of the image */
    }        
}
<div class="imageMarquee"></div>

Upvotes: 4

OXiGEN
OXiGEN

Reputation: 2409

The answer by @Cybercraft is correct. The external image in the snippet is not loading so running the snippet shows blank space, making it hard to visualize the answer. Below is an updated snippet using a local image.

#stack {
  background-image: url(https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45);
  width: 100%;
  position: absolute;
  top: 0;
  height: 50px;
}

.marquee {
  overflow: hidden;
  -webkit-animation: marquee 50s linear infinite;
  animation: marquee 50s linear infinite;
}

@-webkit-keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}

@keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}
<div id="stack" class="marquee"></div>

Upvotes: 0

Cybercraft
Cybercraft

Reputation: 54

Try this :

#space {
  background-image: url(http://www.tedmontgomery.com/tutorial/bckgrnds/outrspc4.gif);
  width: 100%;
  position: absolute;
  top: 0;
  height: 384px;
}

.marquee {
  overflow: hidden;
  -webkit-animation: marquee 50s linear infinite;
  animation: marquee 50s linear infinite;
}

@-webkit-keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}

@keyframes marquee {
  from {
    left: 0
  }
  to {
    left: 100%
  }
}
<div id="space" class="marquee">
</div>

Upvotes: 1

Bowersbros
Bowersbros

Reputation: 3598

The reason this doesn't currently work is that you are using -webkit-animation to animate, but are defining the keyframes without the -webkit- prefix.

To fix this, change @keyframes to @-webkit-keyframes.

Though, you should use both; as well as all the prefixes for the animation too.

Upvotes: 1

taikuri
taikuri

Reputation: 1

Instead of animating a div with css you could use the html marquee tag as shown here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Edit: iI have tested it in previous projects and it works in the newest versions of ie, chrome and firefox.

Upvotes: -1

Related Questions