Как плавно анимировать градиентный фон ⇐ CSS

[Anonymous]

Я хочу добиться эффекта, заключающегося в том, что когда пользователь наводит курсор на элемент div, цвет его фона превращается в градиент, который плавно переключается из одного угла в другой, многократно, с использованием исключительно CSS.
Эффект, которого я хочу достичь, пытаясь выразить это более словами, заключается в том, что более темная часть фона (та, у которой непрозрачность 0,9) многократно скользит из одного угла в другой, пока остается курсор над элементом.

На самом деле происходит то, что фон переходит из одного состояния в другое. Где я ошибаюсь? Как мне добиться плавного анимированного эффекта?

Вот мой код:

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

#test {
width: 200px;
height: 200px;
background-color: rgba(215, 54, 92, 0.7);
}
@keyframes test_hover {
from {
background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* Standard syntax (must be last) */
}
to {
background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* Standard syntax (must be last) */
}
}
#test:hover {
cursor: pointer;
animation-name: test_hover;
animation-duration: 4s;
animation-delay: 1s;
animation-iteration-count: infinite;
}

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

Вот JSFiddle

Этот вопрос упоминался как дубликат, но я думаю, что это не так. Начнем с того, что в этом вопросе нет кода, что затрудняет его понимание. Кроме того, в ответ на этот вопрос он использует переход, но мне он не нужен, потому что он применяется только один раз, я хочу, чтобы моя анимация постоянно повторялась, пока пользователь наводит курсор на элемент div.

Подробнее здесь: https://stackoverflow.com/questions/339 ... d-smoothly