Как более плавно анимировать вращение фонового градиента внутри элемента? ⇐ Html

[Anonymous]

У меня есть кнопка, и я хотел бы анимировать ее фон, повернув ее:

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

.gradient-button {
animation: rotate-gradient 1s infinite;
background-image: linear-gradient(0deg, red, yellow, green);
}

@keyframes rotate-gradient {
0% {
background-image: linear-gradient(0deg, red, yellow, green);
}
/* Adding a step in the middle */
20% {
background-image: linear-gradient(60deg, red, yellow, green);
}
40% {
background-image: linear-gradient(120deg, red, yellow, green);
}
60% {
background-image: linear-gradient(180deg, red, yellow, green);
}
80% {
background-image: linear-gradient(240deg, red, yellow, green);
}
100% {
background-image: linear-gradient(300deg, red, yellow, green);
}
}

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

Fill Form

Однако шагов всего 6, а анимация не плавная. , добавление 24 кадров вручную является контрпродуктивным.

В качестве альтернативы я попробовал JS:

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

$(document).ready(function () {
AnimateRotate(360);
});

function AnimateRotate(d){
var elem = $("#mybutton");

$({deg: 0}).animate({deg: d}, {
duration: 2000,
step: function(now){
elem.css({
"background-image":"linear-gradient("+now+"deg, red, yellow, green);"
});
}
});
}

но это ничего не дает.
Вопрос: как сделать эту анимацию плавной?
Выполняемый код: https://codepen.io/anon/ ручка/OaojNP

Подробнее здесь: https://stackoverflow.com/questions/535 ... in-element