CSS3 анимация с градиентом + фоновое изображение

У меня есть div с фоном, который имеет как фоновое изображение, прозрачное png, так и линейный градиент. Желаемый эффект состоит в том, чтобы изображение анимировалось, а градиент оставался статичным. В Chrome и Safari анимация работает именно так, но в Firefox и IE и фоновое изображение, и градиент анимируются вместе.

Есть ли способ получить желаемый эффект во всех браузерах с помощью CSS без добавления другого 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;
  }

html css css-animations background-image
person LLong    schedule 15.01.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Это сделало работу для меня:

@keyframes bgscroll {
  0% { background-position: 0 0, 0 ; }
  100% { background-position: 0 -230px, 0; }  // added '0' position for 2nd background
}
person skshoyeb    schedule 15.01.2014
comment
Рад, что смог помочь :) - person skshoyeb; 15.01.2014
comment
Да, подтверждено и с моей стороны. Большое спасибо, теперь он работает во всех браузерах, как и ожидалось. - person LLong; 15.01.2014