Линейный градиент Animate совместим со всеми браузерами. ⇐ Jquery

[Anonymous]

Я пытаюсь создать анимацию с линейным градиентом, совместимую со всеми браузерами, но безуспешно.
Сначала я попробовал использовать CSS

Код: Выделить всё

.anim {
animate: anim 4s linear infinite;
}

@keyframes anim {
0%, 100% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
30% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
70% {background: linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%);}
}

но этот код работает только для таких браузеров, как Chrome, Safari, Edge... но не для Firefox.
Я читал на некоторых форумах, что это тип анимации не работает для Firefox, тогда попробовал с jQuery

Код: Выделить всё

$(document).ready(function(){
function Anim(){
$('.anim').animate({
background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
}, 1500)
.animte({
background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
}, 1500)
.animate({
background:'linear-gradient(180deg, rgba(X,X,X,0.8) 0%, rgba(X,X,X,0) 100%)'
}, 1500, Anim);
}

Anim();
});

Но не повезло, этот нигде не работает.
PS: Я также пробовал использовать "-moz-linear-gradient" или "- webkit-linear-gradient"

Подробнее здесь: https://stackoverflow.com/questions/403 ... l-browsers