CSS3 Анимация с градиентом + bg image

Question

У меня есть 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; 
    } 

Answer 1

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

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