CODEWITHSUNDEEP
htmlcssbackground-imagecss-animations
LLong
LLong

Reputation: 157

CSS3 Animation with gradient + bg image

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;
  }

Upvotes: 2

Views: 561

Answers (1)

Naruto Dev
Naruto Dev

Reputation: 1003

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
}

Upvotes: 5

Related Questions