Как плавно анимировать градиент ⇐ Html

[Anonymous]

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

На самом деле происходит то, что фон переходит от одного состояния на другое. Куда я ошибаюсь? Как я могу сделать это анимированный, плавный эффект? class = "Snippet">

#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;
}< /code>
< /code>
< /div>
< /div>
< /p>

Вот jsfiddle < /p>

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


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