CSS3 Animation with gradient + bg image

Question

I have a div with a background that has both a background image that's a transparent png and a linear-gradient. The desired effect is to have the image animate while the gradient remains static. In Chrome and Safari this is how the animation works but in Firefox and IE both the background image and the gradient animate together.

Is there a way to get the desired effect in all browsers using CSS without adding another div?

http://jsfiddle.net/FprGA/

    @-webkit-keyframes bgscroll {
  0% { background-position: 0 0 ; }
  100% { background-position: 0 -230px; }
}

@keyframes bgscroll {
  0% { background-position: 0 0 ; }
  100% { background-position: 0 -230px; }
}

  .hero {
    display: block;
    height: 20rem;
    background-image: image-url("icons_grid.png"), -webkit-linear-gradient(to bottom, #646464, #323232);
    background-image: image-url("icons_grid.png"), -moz-linear-gradient(to bottom, #646464, #323232);
    background-image: image-url("icons_grid.png"), linear-gradient(to bottom, #646464, #323232);
    margin-bottom: 3rem;
    animation: bgscroll 30s infinite linear;
    -webkit-animation: bgscroll 30s infinite linear;
    border-bottom: .3rem solid #0b71b9;
  }

Naruto Dev · Accepted Answer · 2014-01-15 08:49:52Z

5

This did the job for me:

@keyframes bgscroll {
  0% { background-position: 0 0, 0 ; }
  100% { background-position: 0 -230px, 0; }  // added '0' position for 2nd background
}

answered Jan 15, 2014 at 8:49

Naruto Dev

1,0035 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Naruto Dev Over a year ago

Glad that I could help :)

LLong Over a year ago

Yes confirmed on my end as well. Thank you very much, it's working in all browsers as expected now.

Collectives™ on Stack Overflow

CSS3 Animation with gradient + bg image

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related